:root {

    --primary-bg:       #E8ECEF;
    --primary-light:    #D0D9DF;
    --primary-mid:      #A1B2BF;
    --primary:          #436580;
    --primary-dark:     #143F60;

    --secondary-bg:        #F3F0F3;
    --secondary-light:     #E7E0E7;
    --secondary-mid:       #B8A3B6;
    --secondary:           #886685;
    --secondary-dark:      #523D50;

    --tertiary-bg:        #F3F6EA;
    --tertiary-light:     #D8DDA8;
    --tertiary-mid:       #B8CA7F;
    --tertiary:           #88A729;
    --tertiary-dark:      #6D8621;

    --neutral-bg:       #F2F1F1;
    --neutral-light:    #D2D1D0;
    --neutral-mid:      #A5A3A1;
    --neutral:          #4C4843;
    --neutral-dark:     #1F1A14;

    --white:            #fff;

    --space-tiny:   0.25rem;                                        /*  4px */
    --space-xs:     0.5rem;                                         /*  8px */
    --space-sm:     clamp(0.75rem, 0.625rem + 0.5vw, 1rem);         /* 12-16px */
    --space-base:   clamp(1.125rem, 1.0625rem + 0.25vw, 1.25rem);   /* 18-20px */
    --space-md:     clamp(1.375rem, 1.3125rem + 0.25vw, 1.5rem);    /* 22-24px */
    --space-lg:     clamp(1.75rem, 1.5rem + 1vw, 2.25rem);          /* 28-36px */
    --space-xl:     clamp(2.625rem, 2.25rem + 1.5vw, 3.375rem);     /* 42-54px */
    --space-xxl:    clamp(3.375rem, 2.8125rem + 2.25vw, 4.5rem);    /* 54-72px */
    --space-huge:   clamp(4.5rem, 3.75rem + 3vw, 6rem);             /* 72-96px */

    --text-tiny: clamp(0.625rem, 0.5625rem + 0.25vw, 0.75rem);      /* 10-12px */
    --text-xxs:  clamp(0.75rem, 0.6875rem + 0.25vw, 0.875rem);      /* 12-14px */
    --text-xs:   clamp(0.875rem, 0.8125rem + 0.25vw, 1rem);         /* 14-16px */
    --text-sm:   clamp(1rem, 0.9375rem + 0.25vw, 1.125rem);         /* 16-18px */
    --text-base: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);           /* 18-22px */
    --text-md:   clamp(1.375rem, 1.1875rem + 0.75vw, 1.75rem);      /* 22-28px */
    --text-lg:   clamp(1.625rem, 1.4375rem + 0.75vw, 2rem);         /* 26-32px */
    --text-xl:   clamp(2rem, 1.75rem + 1vw, 2.5rem);                /* 32-40px */
    --text-xxl:  clamp(2.25rem, 1.125rem + 4.5vw, 4.5rem);          /* 36-72px */
    
    --max-narrow:   45rem; /* 720px */
    --max-content:  67.5rem; /* 1080px */
    --max-wide:     90rem; /* 1440px */

    --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.25rem + 3vw, 2.5rem); /* 16px-40px */
    --ratio: auto;

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

}

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



/* Work Sans Var */
@font-face {
    font-family: 'font-primary';
    src:    url('/assets/fonts/work-sans-var/work-sans-var.woff2') format('woff2-variations'),
            url('/assets/fonts/work-sans-var/work-sans-var.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
     
}
.font-primary { font-family: 'font-primary', sans-serif; font-style: normal; }
.font-primary-100 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 100; }
.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 { 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; }
.font-primary-900 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 900; }

/* Work Sans Var Italic */
@font-face {
    font-family: 'font-primary';
    src:    url('/assets/fonts/work-sans-var/work-sans-var-italic.woff2') format('woff2-variations'),
            url('/assets/fonts/work-sans-var/work-sans-var-italic.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
    font-style: italic; 
}
.font-primary-i { font-family: 'font-primary', sans-serif; font-style: italic; }
.font-primary-100i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 100; font-style: italic; }
.font-primary-200i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 200; 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; }
.font-primary-800i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 800; font-style: italic; }
.font-primary-900i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 900; font-style: italic; }



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

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

html {
    background-color: var(--white);
    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 {
    background-color: white;
}

/* the navbar wraps the logo, site navigation, and the mobile button */
.site-navbar-wrap {
    padding: var(--gutter);
    position: relative;
    z-index: 3;
}

.site-navbar {
    display: flex;
    gap: var(--space-sm);
    justify-content: space-between;
    max-width: var(--max-content);
    margin-inline: auto;
    width: 100%;
}

.site-logo {
    align-items: center;
    gap: var(--space-sm);
    display: flex;
    font-weight: 600;
    grid-area: logo;
    position: relative;
    text-decoration: none;
    width: 10rem;
}

.page-title {
    background-color: var(--primary-dark);
    background-image: linear-gradient(to top right, var(--primary), var(--primary-dark));
    color: white;
    display: grid;
    min-height: calc(var(--space-huge) * 4);
    grid-template-areas: 'stack';
    overflow-x: clip;
    position: relative;
}

/* the bar below the page title */
/* .page-title::after {
    --height: var(--space-lg);
    background-color: var(--primary-mid);
    content: '';
    height: var(--height);
    opacity: 0.5;
    position: absolute;
    left: 0; bottom: calc(-0.5 * var(--height)); right: calc((100% - var(--max-content)) / 2);
    z-index: 2;
} */

/* gradient for legibility */
.page-title::before {
    background: var(--primary-dark);
    content: '';
    opacity: 0.6;
    position: absolute;
    left: 0; right: 0; bottom: 0; top: 0;
    z-index: 2;
}

.page-title.is-short, 
.template-is-pay-return .page-title,
.template-is-pay .page-title,
.template-is-contact .page-title {
    min-height: auto;
}

.page-title > * {
    grid-area: stack;
    position: relative;

}

.page-title-copy {
    padding: var(--space-huge) var(--gutter);
    align-self: end;
    z-index: 2;
}

.page-title a {
    color: var(--tertiary);
    text-decoration: none;
}

.page-title-copy-inner {
    display: grid;
    gap: var(--space-base);
    max-width: var(--max-content);
    margin-inline: auto;
    width: 100%;
}

.page-title.has-portrait {
    min-height: auto;
    text-align: center;
}

.has-portrait .page-title-copy {
    align-self: center;
}

.has-portrait .page-title-copy-inner {
    gap: var(--space-lg);
}

.page-title h1 {
    line-height: 1.1;
    hyphens: auto;
    overflow-wrap: break-word;
}

.page-title.has-portrait h1 {
    align-self: center;
}

.template-is-post .page-title h1,
.template-is-event .page-title h1 {
    font-size: calc(var(--text-xxl) * 0.85);
}

.page-bio-img {
    border-radius: var(--space-xs);
    margin-inline: auto;
    max-width: 18rem;
    width: 100%;
}

.page-image {
    z-index: 1;
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
}

.page-image img {
    filter: saturate(1.5) contrast(0.7);
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/*--------------------------------------------------------------------------- */
/* MARK: Eyebrow Nav
*/

.site-eyebrow {
    align-items: center;
    display: none;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 500;
}

.site-eyebrow a {
    background-color: var(--secondary);
    color: var(--white);
    padding: calc(0.625 * var(--space-sm)) var(--space-md);
    text-decoration: none;
}

.site-eyebrow-links {
    display: flex; /* we’re using drawer nav until the screen is wider */
    gap: var(--space-sm);
}


/*--------------------------------------------------------------------------- */
/* MARK: Header Nav
*/

.header-menu {
    display: none; /* we’re using drawer nav until the screen is wider */
    grid-area: nav;
}

/*--------------------------------------------------------------------------- */
/* MARK: Mobile Menu
*/

.mobile-menu {
    display: none; /* we’re using drawer nav until the screen is wider */
}

.mobile-nav-toggle {
    align-items: center;
    justify-content: center;
    background-color: var(--neutral-bg);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--neutral-dark);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-weight: 500;
    font-size: var(--text-xs);
    gap: var(--space-xs);
    line-height: 1;
    margin: 0;
    padding: var(--space-sm);
    text-align: right;
}

.mobile-nav-toggle svg {
    fill: currentColor;
}

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

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

main > * {
    margin-block: 0;
}

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

.site-footer {
    background-color: var(--primary-dark);
    color: white;
    font-size: var(--text-xxs);
    font-weight: 500;
    overflow-x: clip;
    padding: var(--space-xl) var(--gutter);
    position: relative;
}

/* .site-footer::before {
    --height: var(--space-lg);
    background-color: var(--primary-mid);
    content: '';
    height: var(--height);
    opacity: 0.5;
    position: absolute;
    right: 0; top: calc(-0.5 * var(--height)); left: calc((100% - var(--max-content)) / 2);
    z-index: 2;
} */

.site-footer-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
    max-width: var(--max-content);
    margin: 0 auto;
    width: 100%;
}

.site-footer a {
    color: white;
}

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

.site-footer-meta {
    font-size: var(--text-tiny);
    grid-area: meta;
}

.site-footer-meta a {
    white-space: nowrap;
}

.site-footer-nav {
    grid-area: nav;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
}

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

.site-footer-logo {
    grid-area: logo;
}
.site-footer-logo-link {
    display: inline-block;
}
.site-footer-logo-link:hover {
    opacity: 0.8;
}

.site-footer-contact strong {
    font-weight: 700;
}


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

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

.site-footer-blurb {
    font-size: var(--text-xs);
    font-family: 'font-primary';
    font-weight: 600;
    grid-area: blurb;
}

.site-footer-blurb p {
    text-wrap: balance;
}

.site-footer-blurb strong {
    display: block;
    font-size: var(--text-xxs);
    font-weight: 400;
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
}


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

.row {
    --bg: transparent;
    --paddingBlock: var(--space-huge);
    background-color: var(--bg);
    /* border: 2px dashed salmon; */
    overflow-x: clip;
    padding: var(--paddingBlock) var(--gutter); /* top/bottom padding (xl) relates to the more/less classes below */
    position: relative;
}

.row.border-hug-left::before,
.row.border-hug-right::before {
    --height: var(--space-lg);
    background-color: var(--primary-mid);
    content: '';
    height: var(--height);
    opacity: 0.5;
    position: absolute;
    z-index: 3;
}
.row.border-hug-left::before {
    left: 0; bottom: calc(-0.5 * var(--height)); right: calc((100% - var(--max-content)) / 2);
}
.row.border-hug-right::before {
    right: 0; bottom: calc(-0.5 * var(--height)); left: calc((100% - var(--max-content)) / 2);
}

.row.top-pad-none       { padding-top:      0; }
.row.bot-pad-none       { padding-bottom:   0; }
.row.top-pad-less       { padding-top:      calc(var(--paddingBlock) * 0.5); }
.row.bot-pad-less       { padding-bottom:   calc(var(--paddingBlock) * 0.5); }
.row.top-pad-more       { padding-top:      calc(var(--paddingBlock) * 1.5); }    /* huge is twice the xl size */
.row.bot-pad-more       { padding-bottom:   calc(var(--paddingBlock) * 1.5); }

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

.row.has-bg-image.dont-fade-bg .row-bg-image {
    filter: opacity(1);
}

.row.has-bg-image .column > hr  { filter: invert(1); }

.row.dark-mode {
    color: white;
}

.row.dark-mode a:not(.btn) {
    color: var(--tertiary);
}

.row.dark-mode a:not(.btn):hover {
    color: var(--primary-mid);
}

.row.strip-gutter {
    padding-left: 0;
    padding-right: 0;
}

.row.has-fade::after {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background-image: linear-gradient(75deg, var(--primary-dark) 45%, rgba(67, 101, 128, 0.5) 100% );
    content: '';
}

.row.has-fade .row-bg-image {
    filter: brightness(0.9) contrast(1.5) saturate(1.5);
}

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

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

.column {
    display: flex;
    gap: var(--space-base);
    flex-direction: column;
    position: relative;
    z-index: 2;
}

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

.column > * + :is(h2, h3, h4, h5, h6) {
    margin-top: var(--space-md);
}
.column > * + hr {
    margin-top: var(--space-md);
}
.column > hr + * {
    margin-top: var(--space-md);
}

/*--------------------------------------------------------------------------- */
/* 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: 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 {
    line-height: 1.2;
}

h2 {
    font-weight: 600;
}

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

:is(h2, h3, h4, h5, h6) {
    color: var(--primary-dark);
}

.row.dark-mode :is(h2, h3, h4, h5, h6) {
    color: inherit;
}

.row.dark-mode.has-bg-image :is(h2, h3, h4, h5, h6) {
    color: var(--tertiary-light);
    font-weight: 600;
}

.row.dark-mode ol strong, 
.row.dark-mode ul strong {
    color: var(--tertiary-light);
}

.row.dark-mode .lede-block {
    color: var(--white);
}

.kicker {
    color: var(--tertiary);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
}

.kicker + :is(h2, h3, h4, h5, h6) {
    margin-top: 0;
}

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

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

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

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

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

/*--------------------------------------------------------------------------- */
/* MARK: Text Styling
*/

.text-upper { text-transform: uppercase; }

strong { font-weight: 600; }
em { font-style: italic; }
strong em, em strong { font-weight: 600; font-style: italic; }

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

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

img, picture, video, canvas, svg  {
    aspect-ratio: var(--ratio);
    display: block;
    height: auto;
    max-width: 100%;
}

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;
}

.cover-image > img {
    width: 100%;
}

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

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

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

blockquote {
    border-left: var(--space-xs) solid var(--secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
    margin-left: var(--space-sm);
    padding-left: var(--space-base);
    padding-block: var(--space-sm);
    font-style: italic;
}

blockquote footer {
    font-weight: 600;
    font-style: normal;
}

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

.callout {
    background-color: var(--tertiary-bg);
    border-left: 2px solid var(--tertiary-mid);
    color: var(--tertiary-dark);
    display: grid;
    gap: var(--space-base);
    padding: var(--space-base);
    font-weight: 500;
}
.callout.callout-neutral {
    background-color: var(--neutral-bg);
    border-color: var(--neutral);
    color: var(--neutral-dark);
}


.callout strong {
    font-weight: 800;
}

.filtering-callout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--space-base);
}

.lede-block {
    color: var(--primary-dark);
    font-size: var(--text-md);
}

.intro-text {
    color: var(--primary);
    font-weight: 300;
    font-size: var(--text-xl);    
}

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

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

.btn {
    background-color: var(--secondary);
    border: 1px solid transparent;
    border-radius: var(--space-tiny);
    color: var(--white);
    cursor: pointer;
    font-weight: 500;
    line-height: 1.1;
    overflow: hidden;
    padding: var(--space-sm) var(--space-lg) calc(var(--space-sm) * 1.1) var(--space-lg);
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: var(--secondary-light);
    border-color: var(--secondary-light);
    color: var(--secondary);
}


/*--------------------------------------------------------------------------- */
/* MARK: POST DETAIL PAGES
*/

.post-meta {
    border-bottom: 1px solid var(--neutral-light);
    font-size: var(--text-sm);
    padding-bottom: var(--space-xl);
}

.post-footer {
    border-top: 1px solid var(--tertiary);
    font-size: var(--text-sm);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);

}

.post-sidebar-wrap {
    position: relative;
}

.post-sidebar {
    display: grid;
    gap: var(--space-base);
    position: sticky;
    left: 0; top: var(--space-base); right: 0;
}

.post-sidebar > * {
    margin: 0;
}

.post-sidebar > h3 {
    font-size: var(--text-base);
}

.post-sidebar-nav {
    border-left: 1px solid var(--primary-mid);
    color: var(--neutral-mid);
    display: grid;
    gap: var(--space-sm);
    line-height: 1.2;
    padding-left: var(--space-sm);
}

.post-sidebar-nav li {
    display: block;
}

.post-sidebar-nav a {
    text-decoration: underline;
}

.post-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    line-height: 1;
    padding-bottom: var(--space-sm);
}
.post-sidebar-tags a {
    background-color: var(--tertiary-light);
    border-radius: var(--radius-lg);
    display: inline-block;
    padding: var(--space-tiny) var(--space-xs);
    text-decoration: none;
}


.bio-title {
    color: var(--primary-mid);
    display: block;
    font-weight: 300;
    text-transform: uppercase;
    font-size: var(--text-md);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-base);
}

.post-body--event > :first-child {
    order: 2;
}

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

/* leave a gap here to make the sidebar nav useful */




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

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

.image-block .image {
    aspect-ratio: var(--ratio);
    border-radius: var(--radius-md);
    position: relative;
    width: 100%;
}
.strip-gutter > .max-none .image-block .image {
    border-radius: 0;
    max-height: 40vh;
}

.image-block-link {
    display: block;
}
.image-block-link > .image {
    background-color: transparent;
    border: 2px solid var(--primary-mid);
    padding: 3px;
}
.image-block-link:hover > .image {
    border-color: var(--tertiary);
}
/* 
.image-block::after {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--space-base);
    background-color: var(--neutral);
    opacity: 30%;
} */

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

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

.gallery-block .gallery {
    align-items: center;
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    padding: 0;
}
.gallery-block.count-is-3 .gallery li:first-child,
.gallery-block.count-is-5 .gallery li:first-child {
    grid-column: span 2;
}
.gallery-block .gallery img {
    aspect-ratio: var(--ratio);
    background-color: var(--neutral-bg);
    border-radius: var(--radius-md);
    height: auto;
    object-fit: contain;
    width: 100%;
}
.gallery-block .gallery img[data-crop=""] {
    object-fit: cover;
}

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

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

.video-block .video {
    aspect-ratio: 16/9;
    background-color: var(--neutral-light);
    position: relative;
}

.video-block iframe {
    aspect-ratio: 16/9;
    border: 0;
    height: calc(100% + 4px);
    inset: -2px;
    position: absolute;
    width: calc(100% + 4px);
}

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

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

.navportal-item {
    align-items: center;
    background-color: var(--neutral-bg);
    border-radius: var(--radius-sm);
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 20% auto;
    overflow: hidden;
    position: relative;
}


.navportal-item::after {
    content: '';
    background-color: var(--neutral);
    height: 100%;
    left: 0;
    opacity: 30%;
    top: 0; bottom: 0;
    position: absolute;
    width: var(--space-sm);
}


.navportal-item-copy {
    display: grid;
    padding: var(--space-md);
    padding-left: 0;
}

.navportal-item-image {
    height: 100%;
    object-fit: cover;
}


.navportal-item-heading {
    font-size: var(--text-md);
    font-weight: 600;
}

.navportal-item-text {
    font-size: var(--text-sm);
    line-height: 1.309;
    margin-block: var(--space-xs);
}

.navportal-item-links span {
    opacity: 0.5;
}

:is(h2,h3,h4,h5,h6) + .navportal-block {
    margin-top: var(--space-lg);
}

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

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

.portal > li {
    border: 1px solid var(--neutral-bg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
}

.portal-item > * {
    margin-block: 0;
}

/* bio portals */

.portal-for-bios {
    --auto-grid-min-size: 14rem;
    --auto-grid-gap: var(--space-xl);
    row-gap: var(--space-xxl);
}

* + .portal-for-bios {
    margin-top: var(--space-lg);
}

.portal-for-bios > li,
.portal-for-partners > li {
    border: 0;
    padding: 0;
}

.portal-for-bios .portal-title {
    color: var(--tertiary);
    font-weight: 600;
}

.portal-for-bios .portal-bio-portrait {
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    margin-inline: auto;
    margin-bottom: var(--space-sm);
    max-width: 18rem;
    width: 75%;
}

.portal-for-bios .portal-company {
    font-size: var(--text-sm);
}

.portal-img-link {
    display: block;
    border-radius: var(--space-xs);
    overflow: hidden;
    margin-bottom: var(--space-sm);
}


.portal-link {
    background-color: var(--tertiary-light);
    border-radius: var(--radius-lg);
    display: inline-block;
    font-weight: 500;
    line-height: 1;
    margin: var(--space-xs) auto 0 auto;
    padding: var(--space-xs) var(--space-sm);
    text-decoration: none;
    text-transform: uppercase;
}


* + .portal-for-partners {
    margin-top: var(--space-lg);
}

.portal-for-partners {
    align-items: center;
    justify-content: center;
    --auto-grid-min-size: 10rem;
    --auto-grid-gap: var(--space-xl);
    --auto-grid-max-columns: 6;
    row-gap: var(--space-xxl);
}

.partner-logo {
}

/*--------------------------------------------------------------------------- */
/* MARK: Cards Block
*/

* + .cards-block {
    margin-top: var(--space-lg);
}

.cards-block {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-xxl) var(--space-lg);
}

.cards-block .card {
    align-content: start;
    display: grid;
    gap: var(--space-sm);
    height: 100%;
}

.row.has-bg-image .cards-block .card {
    border: 0;
}

.cards-block .card-heading {
    font-size: var(--text-lg);
    font-weight: 600;
}

.cards-block .card-icon {
    margin-bottom: var(--space-sm);
}

.cards-block .card-icon > svg {
    aspect-ratio: 1;
    height: var(--space-huge);
    width: var(--space-huge);
}

/*--------------------------------------------------------------------------- */
/* MARK: Timeline Block
*/

* + .timeline-block {
    margin-top: var(--space-lg);
}

.timeline-block {
    display: grid;
    gap: 2px;
}

.timeline-entry {
    align-items: start;
    column-gap: var(--space-xl);
    display: grid;
    padding-bottom: var(--space-xxl);
    position: relative;
}

.timeline-entry::before {
    content: '';
    position: absolute;
    left: var(--space-base);
    top: var(--space-lg);
    bottom: 0;
    width: 1px;
    background-color: var(--tertiary);
}

.timeline-entry:last-of-type {
    padding-bottom: 0;
}

.timeline-entry:last-of-type:before {
    display: none;
}

.timeline-text {
    padding-left: var(--space-xl);
    padding-top: var(--space-tiny);
}
.timeline-dates {
    color: var(--tertiary);
    font-weight: 600;
}
.timeline-month {
    color: white;
}

/*--------------------------------------------------------------------------- */
/* MARK: Zones Block
*/

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

.zone > * {
    position: relative;
    z-index: 2;
}

.zone {
    position: relative;
}

.zone-copy {
    background-color: white;
    display: grid;
    gap: var(--space-base);
    padding: var(--space-lg);
}

.zone-text, .classification-text {
    display: grid;
    gap: var(--space-base);
}

.zone > .zone-bg {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: -25%;
    right: -25%;
    object-fit: cover;
    height: 100%;
    width: 150%;
    max-width: none;
    z-index: 1;
}
.zone-classifications {
    display: grid;
    gap: var(--space-xs);
}
.zone-classification {
    border: 1px solid var(--neutral-light);
    border-left: var(--space-xs) solid var(--neutral-light);
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-base);
}

.classification-heading {
    font-size: var(--text-base);
    font-weight: 600;
}

.classification-text {
    font-size: var(--text-sm);
}

.theme-is-brown .zone-copy { background-color: var(--tertiary-bg); }
.theme-is-green .zone-copy { background-color: var(--primary-bg); }
.theme-is-blue .zone-copy  { background-color: var(--secondary-bg); }

.theme-is-brown .zone-classification { border-color: var(--tertiary-mid); }
.theme-is-green .zone-classification { border-color: var(--primary-mid); }
.theme-is-blue .zone-classification  { border-color: var(--secondary-mid); }

.theme-is-brown :is(h2, h3, h4) { color: var(--tertiary-dark); }
.theme-is-green :is(h2, h3, h4) { color: var(--primary-dark); }
.theme-is-blue :is(h2, h3, h4) { color: var(--secondary-dark); }


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

summary {
    cursor: pointer;
}
.accordions {
    display: grid;
    gap: 0;
}
.accordion {
    border: 1px solid var(--neutral-light);
    border-left: var(--space-tiny) solid var(--primary);
    border-bottom-width: 0;
}
.accordion[open=""] {
    border-left-color: var(--primary-mid);
}
.accordion:last-of-type {
    border-bottom-width: 1px;
}
.accordion > .question {
    padding: var(--space-sm);
    font-weight: 500;
}
.accordion > .answer {
    padding: var(--space-sm);
    padding-top: 0;
}


/*--------------------------------------------------------------------------- */
/* MARK: Anchor Block
*/

.anchor-block {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    line-height: 1;
    font-size: var(--text-sm);
}

.anchor-block .anchor-link {
    background-color: var(--tertiary-light);
    border-radius: var(--radius-lg);
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    text-decoration: none;
    transition: all 0.3s ease;
}
.anchor-block .anchor-link:hover {
    background-color: var(--tertiary);
    border-color: var(--tertiary);
    color: var(--primary-dark);
}

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

* + .blurbs-block {
    margin-top: var(--space-lg);
}

* + .blurbs-block.blurbs-block.single-column {
    margin-top: var(--space-tiny);
}


.blurbs-block {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: var(--space-lg);
    column-gap: var(--space-huge);
}

.blurbs-block .blurb {
    align-content: start;
    display: grid;
    gap: var(--space-xs);
    position: relative;
    padding-left: var(--space-xl);
}

.blurbs-block .blurb::before {
    content: '';
    display: block;
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--space-base);
    max-height: var(--space-xl);
    background-color: var(--primary-mid);
}

.blurbs-block .blurb-heading {
    font-size: var(--text-base);
    font-weight: 600;
}

.blurbs-block.single-column {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
}

.blurbs-block.single-column .blurb {
    padding: var(--space-lg);
}

.blurbs-block.single-column .blurb:nth-child(odd) {
    background-color: var(--neutral-bg);
}

.blurbs-block.single-column .blurb:nth-child(odd)::after {
    background-color: var(--neutral-bg);
    content: '';
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100%;
    position: absolute;
    z-index: 1;
}

.blurbs-block.single-column .blurb::before {
    max-height: var(--space-xxl);
    top: var(--space-base);
    left: calc(-0.5 * var(--space-base));
    opacity: 0.5;
}

.blurbs-block.single-column .blurb > * {
    position: relative;
    z-index: 2;
}

.blurbs-block.single-column .blurb-heading {
    font-size: var(--text-md);
}

.blurbs-block .blurb-text {
    display: grid;
    gap: var(--space-base);
}

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

.pagination {
    display: flex;
    font-size: var(--text-xs);
    font-weight: 500;
    gap: var(--space-sm);
    text-transform: uppercase;
}
.pagination a {
    text-decoration: none;
}


/*--------------------------------------------------------------------------- */
/* MARK: News
*/

.news-listing-sidebar {
    display: grid;
    gap: var(--space-lg);
    position: sticky;
    left: 0; top: var(--space-base); right: 0;
}

.news-listing-sidebar > * {
    display: grid;
    gap: var(--space-sm);
}

.posts-by-year summary {
    cursor: pointer;
    align-items: center;
    display: flex;
    font-weight: 600;
    list-style: none;
    justify-content: space-between;
    position: relative;
}
.posts-by-year summary::-webkit-details-marker {
    display: none;
}
.posts-by-year summary::after {
    background-color: var(--tertiary-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z'%3E%3C/path%3E%3C/svg%3E");
    content: '';
    border-radius: 50%;
    display: flex;
    align-content: center;
    justify-content: center;
    line-height: 1;
    width: var(--space-base);
    height: var(--space-base);
}
.posts-by-year[open=""] summary::after {
    transform: rotate(90deg);
}

.posts-by-year > ul {
    border-left: 1px solid var(--tertiary);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
    line-height: 1.2;
    margin-top: var(--space-sm);
    margin-left: var(--space-tiny);
    padding: 0 0 0 var(--space-sm);
}

.posts-by-year > ul a {
    font-size: var(--text-sm);
    text-decoration: none;
}

.news-tags-cloud {
    gap: var(--space-tiny);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    line-height: 1;
    padding: 0;
}

.news-tags-cloud a {
    background-color: var(--tertiary-light);
    border-radius: var(--radius-lg);
    display: inline-block;
    padding: var(--space-xs);
    font-size: var(--text-sm);
    text-decoration: none;
}
.news-tags-cloud a:hover {
    background-color: var(--primary);
    color: white;
}

.news-filter-notice {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0;
}
.news-filter-notice .clear-filter {
    color: #ce0000;
    font-size: var(--text-sm);
    text-decoration: none;
}


.news-listing {
    display: grid;
    list-style: none;
    padding: 0;
}

.news-item {
    border-top: 1px solid var(--neutral-light);
    display: grid;
    gap: var(--space-lg);
    padding: var(--space-sm) 0;
    grid-template-columns: var(--space-md) auto;
}
.news-item:last-of-type {
    border: 0;
    padding-top: 0;
}


.news-item:last-of-type {
    padding-bottom: 0;
}

.news-item .news-image {
    background-color: var(--primary-mid);
}
.news-item:nth-child(2) .news-image {
    background-color: var(--secondary-mid);
}
.news-item:nth-child(3) .news-image {
    background-color: var(--tertiary-mid);
}

.news-item .news-image img {
    filter: contrast(0.7) saturate(1.2);
    height: 100%;
    object-fit: cover;
    object-position: center left;
    opacity: 0.7;
    width: 100%;

}
.news-item .news-info {
    align-items: start;
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-lg)
}
.news-item .news-title {
    font-size: var(--text-lg);
    max-width: 30ch;
}
.news-item .news-title a {
    text-decoration: none;
}
.news-item time {
    font-size: var(--text-sm);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--neutral-mid);
}
.news-item .news-link {
    margin-top: var(--space-sm);
}
.news-item .news-tags {
    display: flex;
    gap: var(--space-sm);
}
.news-item .news-tag {
    display: inline-block;
    font-size: var(--text-xs);
}


/*--------------------------------------------------------------------------- */
/* MARK: Events
*/

.events-listing {
    display: grid;
    list-style: none;
    padding: 0;
}

.event-item {
    border-top: 1px solid var(--tertiary-light);
    display: grid;
    gap: var(--space-md);
    grid-template-areas:
        "date"
        "info";
    padding: var(--space-lg) 0;
}

.event-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.event-item:last-of-type {
    padding-bottom: 0;
}

.event-item .event-title {
    font-weight: 600;
}

.event-item .event-title a {
    text-decoration: none;
}

.event-item .event-time {
    align-items: end;
    color: var(--primary-dark);
    display: flex;
    gap: var(--space-xs);
    grid-area: date;
    line-height: 1;
}

.event-item .event-time strong {
    display: block;
    font-weight: 400;
    text-transform: uppercase;
}

.event-item .event-time .contact-cta {
    font-size: var(--text-base);
    display: block;
}

.event-item .event-links a {
    color: var(--tertiary);
}

.event-item .event-info {
    align-items: start;
    display: grid;
    gap: var(--space-sm);
    grid-area: info;
}

.event-meta {
    background-color: var(--tertiary-bg);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--space-sm);
    list-style: none;
    padding: var(--space-sm);
    text-align: center;
}

.event-meta > li {
    line-height: 1.4;
}

.event-meta > li:first-of-type {
    color: var(--primary-dark);
    font-weight: 600;
}

.event-meta > li:not(:first-of-type) {
    font-size: var(--text-sm);
}
.event-meta .reg-link {
    padding: 0;
}

.event-meta .reg-link > a {
    display: inline-block;
    max-width: 100%;
}


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

.sponsor-levels {
    display: grid;
    color: white;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.sponsors.sponsor-level-sk-den-partners {
    grid-template-columns: repeat(2, 1fr);
}

.sponsor-level {
    display: block;
    background-color: var(--primary-dark);
    padding: var(--space-lg) var(--space-md);
}

.sponsor-levels h3 {
    color: var(--tertiary);
}

.sponsor-level-tier {
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
}

.sponsor-level-eyebrow {
    color: white;
    display: block;
    text-transform: uppercase;
    font-size: var(--text-base);
}

.sponsors {
    display: grid;
    gap: var(--space-base);
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    padding: 0;
}
.sponsors > .sponsor {
    background-color: white;
    border: 2px solid var(--neutral-bg);
    overflow: hidden;
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease-out;
}
.sponsors > .sponsor:not(.has-link) {
    padding: var(--space-base);
}
.sponsors > .sponsor > a {
    border: 1px solid transparent;
    display: block;
    padding: var(--space-base);
}
.sponsors > .sponsor > a:hover {
    border-color: var(--primary);
}

.sponsors > .sponsor img {
    aspect-ratio: 3/2;
    object-fit: contain;
    width: 100%;
}

.sponsors > .sponsor.stakeholders   { border-bottom-color: #B7F1FD; }
.sponsors > .sponsor.leaders        { border-bottom-color: gold; }
.sponsors > .sponsor.partners       { border-bottom-color: silver; }
.sponsors > .sponsor.supporters     { border-bottom-color: #cd7f32; }


/*--------------------------------------------------------------------------- */
/* MARK: Forms & Contact Page
*/

.contact-form-wrap {
    padding: var(--space-xxl) var(--gutter);
}

.contact-form {
    display: grid;
    gap: var(--space-md);
    max-width: var(--max-content);
    margin: 0 auto;
}

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

.rtbform h2 {
    margin: 0 0 var(--space-md) 0;
}

.rtbform .form-row:last-of-type {
    margin-top: var(--space-lg);
}

.rtbform .two-fields {
    display: grid;
    gap: var(--space-md);
}

.rtbform label, .rtbform .label {
    display: block;
    margin-bottom: var(--space-xs);
}

.rtbform .req {
    color: #ce0000;
}

.rtbform input:is([type="text"], [type="email"], [type="number"]),
.rtbform textarea {
    appearance: none;
    background-color: var(--tertiary-bg);
    border: 1px solid var(--tertiary-mid);
    border-radius: 0;
    box-shadow: none;
    display: block;
    padding: var(--space-xs);
    width: 100%;   
}

.rtbform input:is([type="text"], [type="email"], [type="number"]):focus-visible,
.rtbform textarea:focus-visible {
    border-color: var(--tertiary);
    outline: 0.125rem solid var(--tertiary);
}

.rtbform button:focus-visible {
    background-color: var(--tertiary-dark);
    outline: 0.125rem solid var(--tertiary);

}

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

.rtbform textarea {
    min-height: calc( 2 * var(--space-huge) );
}

.rtbform .radio-group {
    display: grid;
}

.rtbform .radio-group label {
    font-size: var(--text-sm);
    font-weight: 450;
}

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

.op-top-left { object-position: left top; }
.op-top-center { object-position: center top; }
.op-top-right { object-position: right top; }
.op-center-left { object-position: left center; }
.op-center-center { object-position: center center; }
.op-center-right { object-position: right center; }
.op-bottom-left { object-position: left bottom; }
.op-bottom-center { object-position: center bottom; }
.op-bottom-right { object-position: right bottom; }