:root {

    --font-display: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --font-body: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    /* @link https://utopia.fyi/clamp/calculator?a=384,1440,16—72 */
    --gutter: clamp(1rem, -0.2727rem + 5.303vw, 4.5rem);

    /* RAW COLOUR VALUES */
    --color-neutral-bg:         #f9f9f9;
    --color-neutral-light:      #e6e6e6;
    --color-neutral-mid:        #c6c6c6;
    --color-neutral:            #444444;
    --color-dark:               #212121;

    /* SEMANTIC COLOURS */
    --color-surface:    white;
    --color-text:       var(--color-neutral);
    --color-paper:      var(--color-neutral-bg);

    --color-line:        var(--color-neutral-light);
    --color-line-strong: var(--color-neutral-mid);

    /* FONT SIZES */
    /* @link https://utopia.fyi/clamp/calculator?a=384,1440,10—12|14—16|17—20|21—26|26—34|30—46|36—60|44—72 */
    --text-xs: clamp(0.625rem, 0.5795rem + 0.1894vw, 0.75rem);          /* xs: 10px → 12px */
    --text-sm: clamp(0.875rem, 0.8295rem + 0.1894vw, 1rem);             /* sm: 14px → 16px */
    --text-base: clamp(1.0625rem, 0.9943rem + 0.2841vw, 1.25rem);       /* base: 17px → 20px */
    --text-md: clamp(1.3125rem, 1.1989rem + 0.4735vw, 1.625rem);        /* md: 21px → 26px */
    --text-lg: clamp(1.625rem, 1.4432rem + 0.7576vw, 2.125rem);         /* lg: 26px → 34px */
    --text-xl: clamp(1.875rem, 1.5114rem + 1.5152vw, 2.875rem);         /* xl: 30px → 46px */
    --text-xxl: clamp(2.25rem, 1.7045rem + 2.2727vw, 3.75rem);          /* xxl: 36px → 60px */
    --text-huge: clamp(2.75rem, 2.1136rem + 2.6515vw, 4.5rem);          /* huge: 44px → 72px */

    /* PAGE WIDTHS */
    --container-half:   45rem;  /* 720px */
    --container-wide:   90rem;  /* 1440px */
    --container-max:    110rem; /* 1760px */

    --radius-image: 1rem;
    --radius-card: 0.5rem;
    --radius-card-image: 0.25rem;
    --radius-button: 0.25rem;



}



/* -------------------------------------------------------------------------- */
/* FONTS */
/* -------------------------------------------------------------------------- */
/* DEFAULT FONTS */
/* Open Sans Var */
@font-face { font-family: 'font-default--body'; src:url('/assets/fonts/open-sans-var/open-sans-var.woff2') format('woff2-variations'), url('/assets/fonts/open-sans-var/open-sans-var.ttf') format('truetype-variations'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'font-default--body'; src:url('/assets/fonts/open-sans-var/open-sans-var-italic.woff2') format('woff2-variations'), url('/assets/fonts/open-sans-var/open-sans-var-italic.ttf') format('truetype-variations'); font-weight: 300 800; font-display: swap; font-style: italic;  }
/* Figtree Var */
@font-face {
    font-family: 'font-default--display';
    src:    url('/assets/fonts/figtree-var/figtree-var.woff2') format('woff2-variations'),
            url('/assets/fonts/figtree-var/figtree-var.ttf') format('truetype-variations');
    font-weight: 300 900;
    font-display: swap;
     
}

/* -------------------------------------------------------------------------- */
/* INTITUTIONAL FONTS */
/* Plex Sans Var */
@font-face { font-family: 'font-institutional--body'; src:url('/assets/fonts/plex-sans-var/plex-sans-var.woff2') format('woff2-variations'), url('/assets/fonts/plex-sans-var/plex-sans-var.ttf') format('truetype-variations'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'font-institutional--body'; src:url('/assets/fonts/plex-sans-var/plex-sans-var-italic.woff2') format('woff2-variations'), url('/assets/fonts/plex-sans-var/plex-sans-var-italic.ttf') format('truetype-variations'); font-weight: 100 700; font-display: swap; font-style: italic;  }
/* Gambetta Var */
@font-face {
    font-family: 'font-institutional--display';
    src:    url('/assets/fonts/gambetta-var/gambetta-var.woff2') format('woff2-variations'),
            url('/assets/fonts/gambetta-var/gambetta-var.ttf') format('truetype-variations');
    font-weight: 300 700;
    font-display: swap;
     
}
/* -------------------------------------------------------------------------- */
/* EDITORIAL FONTS */

/* Merriweather Sans Var */
@font-face {
    font-family: 'font-editorial--body';
    src:    url('/assets/fonts/merriweather-sans-var/merriweather-sans-var.woff2') format('woff2-variations'),
            url('/assets/fonts/merriweather-sans-var/merriweather-sans-var.ttf') format('truetype-variations');
    font-weight: 300 800;
    font-display: swap;
     
}
/* Merriweather Sans Var Italic */
@font-face {
    font-family: 'font-editorial--body';
    src:    url('/assets/fonts/merriweather-sans-var/merriweather-sans-var-italic.woff2') format('woff2-variations'),
            url('/assets/fonts/merriweather-sans-var/merriweather-sans-var-italic.ttf') format('truetype-variations');
    font-weight: 300 800;
    font-display: swap;
    font-style: italic; 
}
/* Commissioner Var */
@font-face {
    font-family: 'font-editorial--display';
    src:    url('/assets/fonts/commissioner-var/commissioner-var.woff2') format('woff2-variations'),
            url('/assets/fonts/commissioner-var/commissioner-var.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
}


/* -------------------------------------------------------------------------- */
/* CONTEMPORARY FONTS */
/* Switzer Var */
@font-face {
    font-family: 'font-contemporary--body';
    src:    url('/assets/fonts/switzer-var/switzer-var.woff2') format('woff2-variations'),
            url('/assets/fonts/switzer-var/switzer-var.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
}
/* Switzer Var Italic */
@font-face {
    font-family: 'font-contemporary--body';
    src:    url('/assets/fonts/switzer-var/switzer-var-italic.woff2') format('woff2-variations'),
            url('/assets/fonts/switzer-var/switzer-var-italic.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
    font-style: italic; 
}
/* Cabinet Var */
@font-face { font-family: 'font-contemporary--display'; src:url('/assets/fonts/cabinet-var/cabinet-var.woff2') format('woff2-variations'), url('/assets/fonts/cabinet-var/cabinet-var.ttf') format('truetype-variations'); font-weight: 100 900; font-display: swap; }

/* -------------------------------------------------------------------------- */
/* TECHNICAL FONTS */

/* Instrument Sans Var */
@font-face {
    font-family: 'font-technical--body';
    src:    url('/assets/fonts/instrument-sans-var/instrument-sans-var.woff2') format('woff2-variations'),
            url('/assets/fonts/instrument-sans-var/instrument-sans-var.ttf') format('truetype-variations');
    font-weight: 400 700;
    font-display: swap;
}
/* Instrument Sans Var Italic */
@font-face {
    font-family: 'font-technical--body';
    src:    url('/assets/fonts/instrument-sans-var/instrument-sans-var-italic.woff2') format('woff2-variations'),
            url('/assets/fonts/instrument-sans-var/instrument-sans-var-italic.ttf') format('truetype-variations');
    font-weight: 400 700;
    font-display: swap;
    font-style: italic; 
}
/* Outfit Var */
@font-face {
    font-family: 'font-technical--display';
    src:    url('/assets/fonts/outfit-var/outfit-var.woff2') format('woff2-variations'),
            url('/assets/fonts/outfit-var/outfit-var.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
     
}

/* -------------------------------------------------------------------------- */
/* COMMUNITY FONTS */

/* Nunito Var */
@font-face { font-family: 'font-community--body'; src:url('/assets/fonts/nunito-var/nunito-var.woff2') format('woff2-variations'), url('/assets/fonts/nunito-var/nunito-var.ttf') format('truetype-variations'); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: 'font-community--body'; src:url('/assets/fonts/nunito-var/nunito-var-italic.woff2') format('woff2-variations'), url('/assets/fonts/nunito-var/nunito-var-italic.ttf') format('truetype-variations'); font-weight: 200 1000; font-display: swap; font-style: italic;  }
/* Hind Var */
@font-face {
    font-family: 'font-community--display';
    src:    url('/assets/fonts/hind-var/hind-var.woff2') format('woff2-variations'),
            url('/assets/fonts/hind-var/hind-var.ttf') format('truetype-variations');
    font-weight: 300 700;
    font-display: swap;
}


/* -------------------------------------------------------------------------- */
/* font theme mapping */
html[data-font-pairing="default"] {
    --font-display: 'font-default--display', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    --font-body:    'font-default--body', Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
}
html[data-font-pairing="institutional"] {
    --font-display: 'font-institutional--display', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    --font-body:    'font-institutional--body', Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
}
html[data-font-pairing="editorial"] {
    --font-display: 'font-editorial--display', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    --font-body:    'font-editorial--body', Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
}
html[data-font-pairing="contemporary"] {
    --font-display: 'font-contemporary--display', Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    --font-body:    'font-contemporary--body', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
}
html[data-font-pairing="technical"] {
    --font-display: 'font-technical--display', Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    --font-body:    'font-technical--body', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
}
html[data-font-pairing="community"] {
    --font-display: 'font-community--display', Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
    --font-body:    'font-community--body', Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
}
/* -------------------------------------------------------------------------- */
/* END FONTS */
/* -------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------- */
/* COLOURS */
/* -------------------------------------------------------------------------- */
html[data-color-palette="default"] {
    --color-primary:             #005695;
    --color-secondary:           #863e8e;
    --color-accent:              #B1E2E7;
    --color-surface-strong:      #FAFAFA;
}
html[data-color-palette="institutional"] {
    --color-primary:             #005695;
    --color-secondary:           #2A9D8F;
    --color-accent:              #F1DCA7;
    --color-surface-strong:      #FAFAFA;
}
html[data-color-palette="editorial"] {
    --color-primary:             #005695;
    --color-secondary:           #789871;
    --color-accent:              #DBD8E9;
    --color-surface-strong:      #FAFAFA;
}
html[data-color-palette="contemporary"] {
    --color-primary:             #005695;
    --color-secondary:           #06BA63;
    --color-accent:              #DCF6F9;
    --color-surface-strong:      #FAFAFA;
}
html[data-color-palette="technical"] {
    --color-primary:             #005695;
    --color-secondary:           #FF6B35;
    --color-accent:              #BAC0DE;
    --color-surface-strong:      #FAFAFA;
}
html[data-color-palette="community"] {
    --color-primary:             #005695;
    --color-secondary:           #698958;
    --color-accent:              #ADEBFF;
    --color-surface-strong:      #FAFAFA;
}
/* -------------------------------------------------------------------------- */
/* END COLOURS */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* THE BIG STUFF */
/* -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
}
html {
    background-color: var(--color-paper);
    box-sizing: border-box;    
}
body {
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1.25rem;
    line-height: 1.608;
    padding: 0;
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}



/* -------------------------------------------------------------------------- */
/* GENERAL NAVIGATION */
/* -------------------------------------------------------------------------- */
nav ul {
    list-style: none;
    padding: 0;
}

nav ul ul {
    padding-left: 2rem;
}



/* -------------------------------------------------------------------------- */
/* SITE HEADER */
/* -------------------------------------------------------------------------- */
.site-header {
    background-color: white;
}
.site-header a {
    text-decoration: none;
}
.site-header__inner {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    padding: 1rem;
}


/* site courtesy */
.site-courtesy,
.site-footer__courtesy {
    align-items: center;
    background-color: var(--color-secondary);
    display: flex;
    font-size: var(--text-sm);
    justify-content: end;
    padding: 0.25rem 2rem;
}

.site-courtesy.cluster,
.site-footer__courtesy.cluster,
.courtesy-navigation__list.cluster {
    gap: 0;
    justify-content: space-between;
}


.site-courtesy :is(button, a),
.site-footer__courtesy :is(button, a) {
    align-items: center;
    background-color: transparent;
    border: 0;
    color: white;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    line-height: 1;
    gap: 0.25rem;
    padding: 0.5rem;
    text-decoration: none;
}

.site-courtesy :is(button, a):hover,
.site-footer__courtesy :is(button, a):hover {
    color: white;
    opacity: 0.75;
}

/* logo */
.site-title {
    align-items: center;
    display: grid;
    flex: 0 1 13.4375rem;
    max-width: 13.4375rem;
    min-width: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    text-transform: uppercase;
}

/* site navigation */
.site-navigation {
    grid-column: 1 / -1;
    font-weight: 500;
}
.site-navigation__list,
.member-navigation__list {
    display: flex;
    gap: 0.25rem;
}
.site-navigation__list {
    flex-direction: column;
    gap: 0;
}
.member-navigation__list {
    justify-content: end;
}

.site-navigation__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    position: relative;
}
.site-navigation__item:hover {
    background-color: var(--color-neutral-bg);
    border-radius: 0.5rem;
}
.site-navigation__link {
    display: block;
    line-height: 1.25;
    padding: 1rem;
}

[data-has-dropdown] .site-navigation__link {
    padding-right: 0;
}

.site-navigation-toggle,
.site-navigation__submenu-toggle {
    background-color: transparent;
    border: 1px solid var(--color-neutral);
    border-radius: 0.5rem;
    color: inherit;
    cursor: pointer;
    font: inherit;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
}
.site-navigation-toggle {
    margin-left: auto;
}
.site-navigation__submenu-toggle {
    align-self: center;
    min-width: 2.75rem;
    margin-right: 0.5rem;
}
.site-navigation-toggle:focus-visible,
.site-navigation :is(a, button):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
.site-navigation .site-navigation__submenu {
    display: grid;
    grid-column: 1 / -1;
    line-height: 1.25;
    padding: 0 1rem 0.75rem 2rem;
}
.site-navigation__submenu-link {
    display: block;
    padding: 0.75rem 0;
}

.site-courtesy {
    flex-wrap: wrap;
    padding-inline: 1rem;
}


.site-header [hidden] {
    display: none !important;
}


/* -------------------------------------------------------------------------- */
/* PAGE TITLE */
/* -------------------------------------------------------------------------- */
.page-title {
    background-color: var(--color-primary);
    color: white;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr 2fr;
    gap: 1rem;
    padding: 8rem var(--gutter) 4rem var(--gutter);
    position: relative;
}


.page-title > * {
    display: grid;
    gap: 1rem;
    margin-inline: auto;
    max-width: var(--container-wide);
    width: 100%;
}

.page-title__content > *:not(.page-title__media) {
    position: relative;
    z-index: 2;
}

.page-title__copy {
    display: grid;
    gap: 1rem;
    align-content: start;
}



.page-title__summary a:not(.button) {
    color: var(--color-accent);
}
.page-page-title__summary a:hover {
    color: white;
}

.page-title__summary {
    font-size: var(--text-md);
}

.page-title__media {
    position: absolute;
    inset: 0;
}

.page-title__image {
    height: 100%;
    filter: brightness(0.8);
    object-fit: cover;
    width: 100%;
}

.page-title__media::after {
    background-image: linear-gradient(to top right, var(--color-primary) 25%, transparent 75%);
    content: '';
    inset: 0;
    position: absolute;
}

.page-title--image-beside .page-title__media {
    position: static;
}

.page-title--image-beside .page-title__media::after {
    content: none;
}

.page-title--image-beside .page-title__image {
    border-radius: var(--radius-image);
    filter: none;
    height: auto;
    max-height: 36rem;
    object-fit: contain;
}

.page-hero__action {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
}

.page-hero__action > :nth-child(2) {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: white;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.page-hero__action > :nth-child(2)::after {
    content: '→';
    font-weight: 300;
    transition: all 0.2s ease-in-out;
}

.page-hero__action > :nth-child(2):hover {
    box-shadow: none;
    opacity: 0.75;
}

.page-hero__action > :nth-child(2):hover::after {
    translate: 0.5rem;
}

.resource-page__category a {
    color: white;
}
.resource-page__category a:hover {
    color: var(--color-accent);
}


/* -------------------------------------------------------------------------- */
/* MAIN CONTENT LAYOUTS */
/* -------------------------------------------------------------------------- */

.content-row {
    display: grid;
    gap: 1rem;
    padding: 3rem var(--gutter);
}

.content-row--white {
    background-color: white;
}

.content-row + .content-row {
    border-top: 1px solid var(--color-neutral-light);
}

article + .content-row {
    border-top: 1px solid var(--color-neutral-light);
}

.content-row > * {
    margin-inline: auto;
    max-width: var(--container-wide);
    width: 100%;
}

.content-row.no-bottom-pad  { padding-bottom: 0; }
.content-row.no-top-pad     { padding-top: 0; }
.content-row.no-block-pad   { padding-block: 0; }

.page-layout__columns {
    display: grid;
    gap: 2rem;
    align-items: start;
}

.page-layout__columns > * {
    min-width: 0;
}

/* .page-layout__column > h2,
.page-layout__column .text-block > h2 {
    padding-bottom: 1rem;
    position: relative;
}

.page-layout__column > h2::after,
.page-layout__column .text-block > h2::after {
    background-color: var(--color-accent);
    content: '';
    height: 0.25rem;
    max-width: 9rem;
    width: 25%;
    left: 0;
    bottom: 0;
    position: absolute;
} */

.listing-layout {
    display: grid;
    gap: 2rem;
    align-items: start;
}

.team-group:last-of-type,
.opportunity-listing:last-of-type {
    padding-bottom: 3rem;
}

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.card--full-bleed {
    padding: 0;
}

/* -------------------------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------------------------- */

.site-footer {
    background-color: var(--color-primary);
    color: white;
    font-size: var(--text-sm);
}

.site-footer__inner {
    display: grid;
    padding: 3rem 2rem 3.5rem 2rem;
}

.site-footer a {
    color: white;
}
.site-footer :is(a, button):hover {
    color: white;
    opacity: 0.75;
    text-decoration: underline;
}

/* footer logo */
.site-footer__branding {
    display: flex;
    flex-direction: column;
}
.site-footer-title {
    display: inline-block;
    margin-top: auto;
    max-width: fit-content;
}
.site-footer-title__logo {
    filter: invert(1) brightness(10) grayscale(1);
}

.site-footer__contact {
    margin-bottom: 2rem;
}

/* footer navigation */
.site-footer__nav-columns {
    display: grid;
    gap: 2rem;
}
.site-footer__nav-heading {
    color: var(--color-neutral-light);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.site-footer__links {
    line-height: 1.309;
}

.site-footer__link {
    display: block;
    padding-bottom: 0.25rem;
}

.site-footer__link:last-child {
    padding-bottom: 0;
}

.site-footer__link a {
    display: inline-block;
    padding: 0.25rem 0;
    text-decoration: none;
}

/* meta row */
.site-footer__meta {
    background-color: var(--color-neutral);
    display: grid;
    gap: 2rem;
    padding: 2rem;
}
/* copyright row */
.site-footer__copyright {
    background-color: var(--color-neutral);
    font-size: var(--text-xs);
    padding: 1rem 2rem;
}

/* -------------------------------------------------------------------------- */
/* BLOCKS */
/* -------------------------------------------------------------------------- */

.recent-content-block__date {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-neutral);
    font-size: var(--text-sm);
}

.selected-pages-block .page-link-card {
    align-content: start;
    height: 100%;
    overflow: hidden;
}

.selected-pages-block .page-link-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.page-link-card__copy {
    padding: 2rem
}

/* BUTTONS BLOCK */

.button.buttons-block__link {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.buttons-block__link::after {
    content: "→";
    font-weight: 400;
    transition: all 0.2s ease-in-out;
}

.buttons-block__link:hover::after {
    translate: 0.5rem;
}


/* IMAGE BLOCK */

.image-block img {
    border-radius: var(--radius-image);
    border: 1px solid var(--color-line);
}

/* Image block ratio and crop */
figure[data-ratio] > img,
figure[data-ratio] > a > img {
    width: 100%;
    object-fit: contain;
}

figure[data-ratio]:not([data-ratio="auto"]) > img,
figure[data-ratio]:not([data-ratio="auto"]) > a > img {
    aspect-ratio: var(--image-block-ratio, auto);
}

figure[data-ratio][data-crop] > img,
figure[data-ratio][data-crop] > a > img {
    object-fit: cover;
}

figure[data-ratio="1/1"]  { --image-block-ratio: 1 / 1; }
figure[data-ratio="16/9"] { --image-block-ratio: 16 / 9; }
figure[data-ratio="10/8"] { --image-block-ratio: 10 / 8; }
figure[data-ratio="21/9"] { --image-block-ratio: 21 / 9; }
figure[data-ratio="7/5"]  { --image-block-ratio: 7 / 5; }
figure[data-ratio="4/3"]  { --image-block-ratio: 4 / 3; }
figure[data-ratio="5/3"]  { --image-block-ratio: 5 / 3; }
figure[data-ratio="3/2"]  { --image-block-ratio: 3 / 2; }
figure[data-ratio="3/1"]  { --image-block-ratio: 3 / 1; }

.image-block figcaption {
    margin-top: 0.5rem;
}


/* -------------------------------------------------------------------------- */
/* EVENT POSTS */
/* -------------------------------------------------------------------------- */

.events-listing__items.past > .events-listing__item {
    background-color: transparent;
    box-shadow: none;    
    opacity: 0.75;
}

.events-listing__items.past > .events-listing__item:is(:hover, :focus-within) {
    opacity: 1;
}

.events-listing__item--with-date {
    grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
    align-content: start;
}

.events-listing__calendar {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    display: grid;
    justify-items: center;
    padding: 0.5rem;
    border: 1px solid var(--color-line);
    border-radius: 0.5rem;
    background-color: var(--color-paper);
    font-size: var(--text-sm);
    line-height: 1.2;
}

.events-listing__calendar-day {
    color: var(--color-primary);
    font-size: var(--text-xl);
    font-weight: 700;
}

.events-listing__item--with-date > :not(.events-listing__calendar) {
    grid-column: 2;
}

.event .page-title__heading {
    font-size: var(--text-xl);
}

.event__image {
    border-radius: var(--radius-image);
    width: 100%;
}

.event__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.event__body img {
    border-radius: var(--radius-image);
    width: 100%;
}

.event__body figure {
    display: grid;
    gap: 1rem;
}

.event__body--meta {
    border-left: 0.5rem solid var(--color-primary);
    padding-left: 1.5rem;
}


/* -------------------------------------------------------------------------- */
/* NEWS ARTICLES */
/* -------------------------------------------------------------------------- */

.news-listing__item--with-image {
    grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
    align-content: start;
}

.news-listing__thumbnail {
    grid-column: 1;
    grid-row: 1 / span 3;
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card-image);
}

.news-listing__item--with-image > :not(.news-listing__thumbnail) {
    grid-column: 2;
}

.news-article .page-title__heading {
    font-size: var(--text-xl);
}

.news-article__image {
    border-radius: var(--radius-image);
    width: 100%;
}

.news-article__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.news-article__body img {
    border-radius: var(--radius-image);
    width: 100%;
}

.news-article__body figure {
    display: grid;
    gap: 1rem;
}


/* -------------------------------------------------------------------------- */
/* PERSON PROFILES */
/* -------------------------------------------------------------------------- */

.person-profile__image {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-image);
    width: 100%;
}

.person-profile__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}


/* -------------------------------------------------------------------------- */
/* TEAM CARDS */
/* -------------------------------------------------------------------------- */

* + .team-group__wrapper {
    padding-top: 1rem;
}

.team-group__people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 2rem;
    list-style: none;
    padding: 0;
    max-width: 100%;
}

.team-card {
    display: grid;
    align-content: start;
    gap: 0.5rem;
}

.team-card__profile {
    display: grid;
    gap: 1rem;
    text-decoration: none;
}

.team-card__image {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-image);
    object-fit: cover;
    width: 100%;
}

.team-card__name {
    font-size: var(--text-md);
}

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

.role-holders-heading {
    font-size: var(--text-md);
}



/* -------------------------------------------------------------------------- */
/* PAGINATION */
/* -------------------------------------------------------------------------- */

.news-post-navigation {
    background-color: var(--color-neutral-light);
}

/* -------------------------------------------------------------------------- */
/* PARTNERS */
/* -------------------------------------------------------------------------- */

.partner-groups {
    row-gap: 3rem;
}

.partner-group__items {
    list-style: none;
    padding: 0;
}

.partner-card {
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 2rem;
}

.partner-card__logo {
    height: auto;
    width: 100%;
}

/* -------------------------------------------------------------------------- */
/* KUDOS */
/* -------------------------------------------------------------------------- */

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


/* -------------------------------------------------------------------------- */
/* TYPOGRAPHY */
/* -------------------------------------------------------------------------- */

/* headings */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
}

h1 { font-size: var(--text-huge); line-height: 1.154; font-weight: 700; text-wrap: balance;   }
h2 { font-size: var(--text-xl);   line-height: 1.154;  }
h3 { font-size: var(--text-lg);   line-height: 1.309;  }
h4 { font-size: var(--text-md);   line-height: 1.309;  }
h5 { font-size: var(--text-base); line-height: 1.309;  }
h6 { font-size: var(--text-sm);   line-height: 1.309;  }

/* paragraph styles */
.lede       { font-size: var(--text-md); }
.callout    { background-color: white; border-left: 0.25rem solid var(--color-secondary); padding: 1rem; }

/* text styles */
strong      { font-weight: 600; }
em          { font-style: italic; }

/* link styling */
a               { color: var(--color-primary); }
a:hover         { color: var(--color-secondary); }
a:active        { opacity: 0.75; }
a.no-underline  { text-decoration: none; }

/* -------------------------------------------------------------------------- */
/* ELEMENTS */
/* -------------------------------------------------------------------------- */

/* buttons */
a.button,
button.button {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-button);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    display: inline-block;
    padding: 1rem 2rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

a.button:hover,
button.button:hover {
    box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.1);
}

/* tags */
.tags > a {
    background-color: var(--color-secondary);
    border-radius: 3rem;
    color: white;
    display: inline-block;
    font-size: var(--text-sm);
    line-height: 1.154;
    padding: 0.3125rem 0.5rem;
    text-decoration: none;
    text-transform: lowercase;
}


/* horiztonal rules */
hr {
    background-color: var(--color-neutral-light);
    display: block;
    border: 0;
    height: 1px;
    padding: 0;
    margin: 1.5rem 0;
    width: 100%;
}

/* figures and captions */
figcaption {
    font-style: italic;
    font-size: var(--text-sm);
    text-align: center;
}

/* blockquotes */
blockquote {
    border-left: 0.5rem solid var(--color-primary);
    color: var(--color-primary);
    display: grid;
    font-size: var(--text-md);
    gap: 0.5rem;
    padding-left: 1rem;
}

blockquote footer {
    color: var(--color-text);
    font-style: italic;
    font-size: var(--text-base);
}

/* skip link */
.skip-link {
    background: black;
    color: white;
    left: 50%;
    padding: 0.25rem;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
}
.skip-link:focus {
    transform: translateY(0%);
}

address {
    font-style: normal;
}


/* -------------------------------------------------------------------------- */
/* FORMS */
/* -------------------------------------------------------------------------- */
.rtbform {
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 0.5rem;
    box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.05);
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    justify-items: start;
    width: 100%;
}

.rtbform > * {
    width: 100%;
}

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

.rtbform label[for] {
    display: block;
    margin-bottom: 0.375rem;
}

.rtbform fieldset {
    min-width: 0;
}

.rtbform legend {
    font-weight: 600;
}

.rtbform:not(.compact-form) fieldset > * + * {
    margin-top: 0.75rem;
}

.rtbform [class$="__help"] {
    font-size: var(--text-sm);
    line-height: 1.5;
    max-width: 70ch;
}

.rtbform [class$="__help"] + :is(input, select, textarea) {
    margin-top: 0.5rem;
}

.rtbform input:not([type=radio],[type=checkbox],[type=hidden]),
.rtbform select,
.rtbform textarea {
    background: var(--color-paper);
    border: 1px solid var(--color-line-strong);
    border-radius: 0.25rem;
    color: inherit;
    display: block;
    font: inherit;
    min-height: 2.75rem;
    padding: 0.5rem;
    width: 100%;
}

.rtbform button[type=submit] {
    background-color: var(--color-accent);
    border: 0;
    border-radius: 10rem;
    color: var(--color-text);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    display: inline-block;
    margin-left: auto;
    padding: 1rem 2rem;    
    width: auto;
}

.rtbform :is(input, select, textarea, button, a):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

fieldset {
    border: 0;
    padding: 0;
}

legend {
    padding: 0;
}

.compact-form {
    gap: 1rem;
    padding: 1.5rem;
}

.compact-form fieldset {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.compact-form legend {
    font-weight: 600;
    margin-bottom: 1rem;
}

.compact-form label {
    display: block;
    margin-bottom: 0.375rem;
}

.compact-form button[type=submit] {
    justify-self: start;
    margin-left: 0;
    padding: 0.75rem 1.5rem;
}




/* -------------------------------------------------------------------------- */
/* UTILITIES */
/* -------------------------------------------------------------------------- */

/* basic grid + 1rem gap */
.grid-sm {
    display: grid;
    gap: 1rem;
}
.grid-md {
    display: grid;
    gap: 2rem;
}
.grid-lg {
    display: grid;
    gap: 3rem;
}
.grid-4-col {
    grid-template-columns: repeat(4, 1fr);
}



/* remove list styling and padding */
.no-list, .list-none {
    list-style: none;
    padding: 0;
}

/* flex */
.cluster {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

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