/* Global Style Sheet */
/* Mobile-first, so all general and small-screen rules are default */
/* Comments with -- at head and tail are for organization/grouping */


/* -- Common rules for sitewide application -- */

@font-face {
    font-family: "baskerville";
    font-weight: 100 500 1000;
    src:
        url("../assets/fonts/librebaskerville-variablefont_wght-webfont.woff2")
            format("woff2"),
        url("../assets/fonts/librebaskerville-variablefont_wght-webfont.woff")
            format("woff");
    font-display: swap;
}

@font-face {
    font-family: "d-din-bold";
    font-weight: 800;
    src:
        url("../assets/fonts/d-dincondensed-bold-webfont.woff2") format("woff2"),
        url("../assets/fonts/d-dincondensed-bold-webfont.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "d-din";
    font-weight: 400;
    src:
        url("../assets/fonts/d-dincondensed-webfont.woff2") format("woff2"),
        url("../assets/fonts/d-dincondensed-webfont.woff") format("woff");
    font-display: swap;
} 
/*
# Font info:
- Original font TTF font files converted to WOFF(2) via fontsquirrel.com/tools/webfont-generator
- Fonts used have free commercial use licenses
- DIN alternative: DIN 1451 from https://fontsarena.com/blog/free-din-font-and-alternatives/
- Baskerville alternative: Libre Baskerville (variable) from Google Fonts
*/

:root {
    /* Brand base palette (fallback) */
    --blue: #00205c;
    --red: #c40d3c;
    --tan: #d6d2c4;
    --teal: #758892;
    --tapa: rgb(243 242 237);
    /* Brand base palette in Oklch for better color manipulation */
    --blue: oklch(0.2682 0.1139 260.72); /* #00205c */
    --red: oklch(0.5239 0.2046 17.29); /*#c40d3c*/
    --tan: oklch(0.894 0.0067 96.71); /*#d6d2c4*/
    --teal: oklch(0.615 0.0267 230.73); /*#758892*/

    /* Page chrome */
    --page-edge: 32px;
    --page-edge-img: 48px;

    /* Brand color scales (2 steps light 2 steps dark) */
    --blue-l1: oklch(from var(--blue) calc(l * 1.5) c h);
    --blue-l2: oklch(from var(--blue) calc(l * 2) c h);
    --blue-d1: oklch(from var(--blue) calc(l * 0.625) c h);
    --blue-d2: oklch(from var(--blue) calc(l * 0.25) c h);
    --red-l1: oklch(from var(--red) calc(l * 1.55) c h);
    --red-l2: oklch(from var(--red) calc(l * 1.75) c h);
    --red-d1: oklch(from var(--red) calc(l * 0.625) c h);
    --red-d2: oklch(from var(--red) calc(l * 0.3875) c h);
    --tan-l1: oklch(from var(--tan) calc(l * 1.0375) c h);
    --tan-l2: oklch(from var(--tan) calc(l * 1.08) c h);
    --tan-d1: oklch(from var(--tan) calc(l * 0.875) c h);
    --tan-d2: oklch(from var(--tan) calc(l * 0.75) c h);
    --teal-l1: oklch(from var(--teal) calc(l * 1.125) c h);
    --teal-l2: oklch(from var(--teal) calc(l * 1.25) c h);
    --teal-d1: oklch(from var(--teal) calc(l * 0.675) c h);
    --teal-d2: oklch(from var(--teal) calc(l * 0.5) c h);

    /* Ensure WCAG AA contrast */
    --text-on-light: oklch(0.3 0 0); /* L=0.3 for dark text */
    --text-on-dark: oklch(0.9 0 0); /* L=0.9 for light text */

    /* Consistent perceived brightness */
    --success: oklch(0.7 0.15 140); /* Green */
    --warning: oklch(74.841% 0.15241 89.106); /* Yellow */
    --error: oklch(0.7 0.15 30); /* Red */

    /* Icon color */
    --icon-fill: var(--blue);

    /* Layout units: Full */
    --u1: 8px;
    --u2: calc(var(--u1) * 2);
    --u3: calc(var(--u1) * 3);
    --u4: calc(var(--u1) * 4);
    --u5: calc(var(--u1) * 5);
    --u6: calc(var(--u1) * 6);
    --u7: calc(var(--u1) * 7);
    --u8: calc(var(--u1) * 8);
    --u9: calc(var(--u1) * 9);
    --u10: calc(var(--u1) * 10);
    /* Layout units: Fractional */
    --uf2: calc(var(--u1) / 2);
    --uf4: calc(var(--u1) / 4);

    /* Distance from content to display edge */
    --page-edge: 24px;
    --page-edge-img: 32px;

    /* Standard font sizing based on defined units */
    font-size: 14px;
    line-height: var(--u3);
}

@media (prefers-color-scheme: dark) {
    :root {
        background-color: var(--blue-d2);
        color: var(--text-on-dark);
    }
}
@media (prefers-color-scheme: light) {
    :root {
        background-color: var(--tan-l2);
        /* background-color: #d5d2c4;
        background-color: var(--tan-d2); */
        color: var(--text-on-light);
    }
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    vertical-align: baseline;
    font-size: 100%;
    font: inherit;
    font-family: "baskerville", "Georgia", "Times New Roman", serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--u9);
    background-color: var(--tan-l2);
    /* background-color: #d5d2c4;
    background-color: var(--tan-d2); */
}

/* -- Base layout items -- */
/* Body serves as main container, set to flex column for simplicity */

body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background:
        linear-gradient(
            to right,
            rgb(from var(--tapa) r g b / 0.1) 0px,
            rgb(from var(--tapa) r g b / 1) var(--page-edge),
            rgb(from var(--tapa) r g b / 1) calc(100% - var(--page-edge)),
            rgb(from var(--tapa) r g b / 0.1) 100%
        ),
        url("../img/bg-tapa-light-vertical-l.png"),
        url("../img/bg-tapa-light-vertical-r.png"),
        linear-gradient( to bottom, var(--tan-d2), var(--tan-d2));
    background-position:
        0 0,
        0 0,
        right 0,
        0 0;
    background-repeat: no-repeat, repeat-y, repeat-y, no-repeat;
    background-size:
        100% 100%,
        var(--page-edge-img) auto,
        var(--page-edge-img) auto, 
        100% 100%;
}

body.content.providers, body.content.researchers, body.content.pilots, body.content.datacube {
    background: unset;
    background-color: oklch(from var(--tapa) 1.01 c h);
    background-color: #ffffff;
}

header,
main {
    width: 100%;
    margin: 0 auto;
}

a.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--blue-d1);
    color: #fff !important;
    padding: var(--u1) var(--u2);
    z-index: 100;
    transition: top 0.3s ease-in-out;
}


/* -- Main Site/Top Navigation -- */

nav#site-nav {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--u2);
    width: 100%;
    padding: var(--u1) var(--u1);
    max-height: 96px;
    background-color: var(--tan-l2);
    color: #000;
    border-bottom: var(--u1) solid var(--red);
}

nav#site-nav #logo-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

nav#site-nav #logo-nav a {
    width: 115px;
    height: auto;
}
nav#site-nav #logo-nav .logo {
    width: auto;
    height: 32px;
}


nav#site-nav * {
    font-family: "d-din-bold", "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.1rem;
    line-height: 1rem;
    text-transform: uppercase;
}

nav#site-nav #search-form button svg {
    fill: #fff;
}

nav#site-nav button#mobile-menu-toggle {
    position: absolute;
    top: 4px;
    left: 4px;
    display: block; 
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding: 8px;
}

nav#site-nav button .hamburger { 
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 2px;
}
nav#site-nav button .hamburger:before {
    content: "";
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--blue);
    z-index: 12;
    background-color: var(--blue);
    color: var(--blue);
    /* Vendor prefix for broader compatibility */
    -webkit-mask-image: url('/img/icon-hamburger.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    /* Standard properties */
    mask-image: url('/img/icon-hamburger.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition-property: background-color;
    transition-duration: 0.25s;
}

nav#site-nav button[aria-expanded='true'] .hamburger:before {
    /* -webkit-mask-image: url('/img/icon-close.svg');
    mask-image: url('/img/icon-close.svg'); */
    -webkit-mask-image: url('/img/icon-flower.svg');
    mask-image: url('/img/icon-flower.svg');
}

nav#site-nav button#mobile-menu-toggle:hover .hamburger:before {
    background-color: var(--red);
}

#mobile-menu-toggle[aria-expanded='true'] ~ #main-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

nav#site-nav #main-menu {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 11;
    visibility: hidden;
    opacity: 0;
    /* pointer-events: none; */
    flex-direction: column;
    width: 100%;
    height: auto;
    /* margin-top: 0; */
    padding: var(--2) var(--u2) var(--u4) var(--u2);
    background-color: var(--tan-l2);
    border-bottom: var(--u1) solid var(--red);
    transition: opacity 0.2s ease;
    box-shadow: rgb( from var(--red-d2) r g b / 0.75) 0px 8px 8px;
}

nav#site-nav #main-menu ul { 
    width: 100%;
    flex-direction: column; 
    gap: 0; 
    margin: 0;
    padding: 0;
}
nav#site-nav #main-menu ul li { 
    position: relative;
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    align-items: center; 
    justify-content: center; 
    gap: 0;
    width: 100%; 
    padding: 0; 
    border-top: 1px solid var(--teal);
}
nav#site-nav #main-menu ul li a { 
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--u2) var(--u2);
    font-size: 1.5rem; 
}

nav#site-nav #main-menu ul li a:hover,
nav#site-nav #main-menu ul li a:visited:hover,
nav#site-nav #main-menu ul li a:active {
    color: var(--red-d1);
    text-decoration: none;
}

nav#site-nav #main-menu ul li a:visited {
    color: var(--teal-d1);
    text-decoration: none;
}

nav#site-nav #main-menu #search-form {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: var(--u2);
    border-top: 1px solid var(--teal);
}

nav#site-nav #search-form input {
    flex-basis: calc(100% - 32px);
    flex-shrink: 2;
    box-sizing: border-box;
    height: var(--u5);
    padding: var(--uf4) var(--uf2);
    border: 2px solid var(--tan);
    border-right-width: 0px;
    border-radius: var(--u1) 0 0 var(--u1);
    font-family: "d-din";
    font-weight: 400;
    text-transform: none;
}
nav#site-nav #search-form button {
    width: var(--u5);
    height: var(--u5);
    padding: var(--uf4) var(--uf2);
    border-radius: 0 var(--u1) var(--u1) 0;
    background-color: var(--blue);
    cursor: pointer;
}

/* Special display of main nav item blocks */
nav#site-nav #main-menu ul li a:hover, nav #main-menu ul li a:active { 
    text-decoration: none;
    background-color: var(--tan);
    color: var(--red);
}

nav#site-nav #main-menu ul li a.current:before {
    position: absolute;
    top: calc(50% - 8px);
    left: 0;
    display: block;
    content: "";
    width: 0px;
    height: 0px;
    border: 8px solid var(--red);
    border-color: transparent transparent transparent oklch(from var(--red) l c h / 1);
    background-color: unset;
}


/* -- Breadcrumbs -- */

nav#breadcrumbs { 
    order: 1; 
    width: 100%;
    max-width: 100%;
}

nav#breadcrumbs * {
    font-family: "d-din", "Arial Narrow", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.066rem;
    text-shadow: 2px 2px 4px #000000ee;
}

nav#breadcrumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--u1);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--u1) var(--u2) var(--u1) var(--u2);
    /* background-color: #00000033; */
    background: 
        linear-gradient(
            to bottom,
            rgba(40, 35, 35, 0.8) 5%,
            rgba(40, 39, 35, 0.1) 75%,
            rgba(40, 39, 35, 0.0) 95%
        );
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    color: #fff;
    font-size: 0.75rem;
}
.breadcrumbs a, .breadcrumbs a:hover, .breadcrumbs a:link, .breadcrumbs a:visited, .breadcrumbs span {
    color: #fff;
    line-height: 1em;
}
.breadcrumbs { display: none;}

/* -- Main content area -- */

main {
    position: relative;
    flex-grow: 1;
    /* display: grid;
    grid-template-columns: 1fr minmax(280px, 65ch) 1fr;
    grid-template-columns: max-content;
    grid-template-rows: min-content; */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--u4);
    width: 100%;
    margin: 0 auto;
    /* max-width: 100%; */
    padding: var(--u4) 0;
    background:
        linear-gradient(
            to bottom,
            rgba(40, 39, 35, 0.3) 0px,
            rgba(40, 39, 35, 0) 8px
        );
    background-repeat: repeat-x;
    background-size: 100% 32px;
    background-position: 0 0;
}

main > section {
    /* grid-column: 2; */
    padding: 0 var(--u3);
    width: 100%;
}

section + .divider {
    width: 50%;
    max-width: 65ch;
    min-width: 280px;
    height: 8px;
    background-image: url('../img/cpivh-bg-pattern-wave-tan.png');
    background-repeat: repeat;
    background-position: top center;
    background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(
            to right,
            transparent 0px,
            #000000cc 30%,
            #000000cc  70%,
            transparent  100%
        )
    ;
    mask-image: linear-gradient(
            to right,
            transparent 0px,
            #00000066 30%,
            #00000066 70%,
            transparent  100%
        )
    ;
}

section:last-of-type:after { 
    content: unset;
    background: none; 
}

section > h2,
section h3.notable, section h4.notable  {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--u1);
}

section > h2 > a,
section > .notable > a {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-decoration: none;
    background-color: var(--teal);
    -webkit-mask-image: url('/img/icon-link.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    mask-image: url('/img/icon-link.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    transition-property: background-color, width, height;
    transition-duration: 0.33s;
}
section > h2 > a:hover, section > h2 > a:focus,
section > .notable > a:hover, section > .notable > a:focus {
    background-color: var(--red);
    width: 24px;
    height: 24px;
}

/* -- Footer -- OK */

footer .branding { grid-area: branding; }
footer .extras { grid-area: extras; }
footer .copyright { grid-area: copyright; }
footer > ul.links { grid-area: links; }

footer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--u6);
    width: 100%;
    padding: var(--u3) var(--u3);
    background-color: var(--blue-d1);
    color: #fff;
}

footer .branding {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--u2);
}

footer .branding img {
    width: 100%;
    height: auto;
    max-width: 240px;
}

footer .branding p {
    font-style: normal;
    font-size: 0.875rem;
    text-align: center;
    margin: 0;
    padding: 0;
}

footer ul.links {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--u1);
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .extras {
    align-self: start;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--u4);
}

footer .extras a {
    flex-shrink: 1;
    width: auto;
}

footer .copyright {
    width: 100%;
    margin: 0;
    padding: var(--u1) 0 0 0;
    font-size: 0.875rem;
    text-align: center;
}

footer > * {
    flex-grow: 1;
    color: #fff;
}

footer a:link {
    color: #fff;
    text-decoration: none;
    font-family: "d-din-bold", "Arial Narrow", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.0785rem;
}
footer a:hover {
    text-decoration: underline;
    color: #fff;
}
footer a:visited {
    text-decoration: underline;
    color: var(--teal-l2);
}

footer ul.social {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--u1);
}

footer .social a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: var(--uf2);
    color: #fff;
}

footer .social a:hover,
footer .social a:focus-within {
    color: var(--teal);
}

footer .social a .icon {
    width: 32px;
    height: 32px;
    background-color: currentColor;
}


/* -- Content Areas -- */

section {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* align-items: center; */
    /* justify-content: center; */
    gap: var(--u2);
    min-width: 300px;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--u3);
}

h1,
h2,
h3,
h4,
h5,
h6,
[class^="btn-"] {
    font-family: "d-din-bold", "Arial Narrow", sans-serif;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.0326em;
    line-height: 1em;
    text-align: left;
    text-transform: uppercase;
}

h1 {
    padding: 0 var(--u1);
    font-size: 3.5rem;
    color: var(--blue);
    letter-spacing: 0;
}

h2 {
    font-size: 1.75rem;
    line-height: var(--u4);
    color: var(--blue-d2);
}

h3 {
    font-size: 1.25rem;
    line-height: var(--u3);
    color: var(--teal-d1);
}

h4 {
    font-size: 1rem;
    line-height: var(--u2);
    color: var(--blue-d1);
}

h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
    font-family: inherit;
    font-size: inherit;
}

p {
    font-size: 1rem;
    /* color: var(--blue-d2); */
    padding: 0 0 var(--u2) 0;
}

a:link {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    color: var(--blue-l1);
    text-decoration: underline;
}

a:has(img) {
    line-height: 1em;
}

strong, a strong { font-weight: 800; }

a[class^="btn-"],
input[type=submit] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: fit-content;
    text-align: center;
    text-decoration: none;
    transition-property: background-color;
    transition-duration: 0.25s;
}
a.btn-action, 
input[type=submit] {
    padding: var(--u1) var(--u2);
    border-radius: var(--u1);
    background-color: var(--blue);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.25rem;
    font-weight: 400;
}
a.btn-more {
    flex-direction: row;
    gap: var(--u1);
    padding: var(--u1) var(--u2);
    border-radius: var(--u1);
    background-color: none;
    color: var(--blue-l1);
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 400;
}
a.btn-more:after {
    content: "";
    display: inline-flex;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    font-family: inherit;
    font-size: 1.5rem;
    background-color: var(--blue-l1);
    mask-image: url('/img/icon-angle.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 12px 12px;
    transform: rotate(90deg);
}

a.btn-action:hover,
input[type=submit]:hover {
    background-color: var(--blue-l1);
    text-decoration: none;
    color: #fff;
}
a.btn-more:hover {
    background-color: var(--tan-l1);
    text-decoration: none;
    color: var(--red);
}
a.btn-more:hover:after {
    background-color: var(--red);
}

ul, ol {
    list-style-position: outside;
    margin-left: 1rem;
}

li { padding-left: 1rem; }

.logo {
    width: 400px;
    height: auto;
}

.intro-text {
    font-size: 1.2rem;
}


/* Specialized links */

p.links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-around;
    gap: var(--u3);
    width: 100%;
}

p.links a img {
    max-width: 50%;
    min-width: 100px;
    height: auto;
}

ul.links {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

ul.links li {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}

ul.resource-list, ul.events-list {
    margin-left: 0;
}

section.links.vcl {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* .social {
    justify-content: space-evenly;
} */

/* section.va a {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 1;
} */
/* .social a[class^="btn-"] {
    max-width: var(--u5);
    max-height: var(--u5);
    padding: 0px;
    flex-basis: var(--u5);
    flex-grow: 0;
    flex-shrink: 3;
    background-color: unset;
}

.social a img {
    width: 100%;
    height: auto;
    max-width: var(--u5);
    min-width: var(--u4);
    max-height: var(--u5);
    min-height: var(--u4);
    object-fit: cover;
} */


/* Inline SVG buttons */

/* .btn-icon svg {
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    fill: var(--teal);
    transition: fill 0.25s;
}
.btn-icon:hover svg {
    fill: var(--teal-d1);
}

.btn-icon span {
    display: inline-block;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
} */

/* Small link buttons for things like social or connectivity links */

ul.links.related { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--u2);
}

ul.links.related li { 
    flex-basis: auto;
}

ul.links.related li a { 
    position: relative;
    width: auto;
    height: 32px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--uf2);
    padding: var(--uf4);
    border-radius: var(--u1);
    overflow: hidden;
}

ul.links.related li a i.icon {
    width: 24px;
    height: 24px;
    background-color: currentColor;
}

ul.links.related li a:hover,
ul.links.related li a:focus-within  {
    text-decoration: none;
    background-color: var(--tan);
}

ul.links.related li a:hover i.icon,
ul.links.related li a:focus-within i.icon  {
    background-color: currentColor;
}


/* -- Icons -- */

.icon + span, 
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

i.icon {
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
}

.icon.fb {
    mask-image: url('/img/icon-fb.svg');
}

.icon.yt {
    mask-image: url('/img/icon-yt.svg');
}

.icon.insta {
    mask-image: url('/img/icon-insta.svg');
}

.icon.linkedin {
    mask-image: url('/img/icon-linkedin.svg');
}

.icon.xt {
    mask-image: url('/img/icon-xt.svg');
}

.icon.vimeo {
    mask-image: url('/img/icon-vim.svg');
}

.icon.snap {
    mask-image: url('/img/icon-snap.svg');
}

.icon.tiktok {
    mask-image: url('/img/icon-tiktok.svg');
}

.icon.pintrest {
    mask-image: url('/img/icon-pintrest.svg');
}

.icon.mail {
    mask-image: url('/img/icon-mail.svg');
}

.icon.email {
    mask-image: url('/img/icon-email.svg');
}

.icon.sms {
    mask-image: url('/img/icon-sms.svg');
}

.icon.phone {
    mask-image: url('/img/icon-phone.svg');
}

.icon.pubmed {
    mask-image: url('/img/icon-pubmed.svg');
}

.icon.gscholar {
    mask-image: url('/img/icon-gscholar.svg');
}

.icon.angle-up {
    mask-image: url('/img/icon-angle.svg');
}

.icon.angle-fish{
    mask-image: url('/img/icon-angle-fish.svg');
}

.icon.heart {
    mask-image: url('/img/icon-heart.svg');
}

.icon.flower {
    mask-image: url('/img/icon-flower.svg');
}

.icon.star {
    mask-image: url('/img/icon-star.svg');
}

.icon.clock {
    mask-image: url('/img/icon-clock.svg');
}

.icon.search {
    mask-image: url('/img/icon-search.svg');
}

.icon.download {
    mask-image: url('/img/icon-download.svg');
}

.icon.transcript {
    mask-image: url('/img/icon-transcript.svg');
}

.icon.file {
    mask-image: url('/img/icon-file.svg');
}

.icon.link{
    mask-image: url('/img/icon-link.svg');
}

.icon.link{
    mask-image: url('/img/icon-link.svg');
}

.icon.close{
    mask-image: url('/img/icon-close.svg');
}

.icon.hamburger{
    mask-image: url('/img/icon-hamburger.svg');
}

.icon.stack{
    mask-image: url('/img/icon-stack.svg');
}

.icon.grid{
    mask-image: url('/img/icon-grid.svg');
}

.icon.vdots, .icon.tools{
    mask-image: url('/img/icon-vdots.svg');
}

.icon.hdots{
    mask-image: url('/img/icon-hdots.svg');
}

.icon.filter{
    mask-image: url('/img/icon-filter.svg');
}

.icon.sort{
    mask-image: url('/img/icon-sort.svg');
}

/* -- UI buttons -- */
button.ui {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: var(--uf2);
    background: transparent;
    border-width: 0px;
    cursor: pointer;
    border-radius: var(--u1);
    transition: 0.33s background-color;
}

button.ui i.icon {
    width: 16px;
    height: 16px;
    background-color: var(--teal-d1);
    transition: 0.33s background-color;
}

button.ui:hover {
    background-color: var(--teal);
}
button.ui:hover i.icon {
    background-color: var(--tan-l2);
}

/* button.ui:focus {
    background-color: var(--tan-l1);
}
button.ui:focus i.icon {
    background-color: var(--teal-d2);
} */


/* -- Back to Top button -- */
#back-to-top {
    position: fixed;
    bottom: 0px;
    right: 0;
    z-index: 12;
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 var(--u3) 0 0;
    border-radius: var(--u1) var(--u1) 0 0;
    overflow: hidden;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.25s;
}

#back-to-top a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--u1);
    text-decoration: none;
    background-color: oklch(from var(--teal) l c h / 0.5);
    transition-property: background-color;
    transition-duration: 0.25s;
}
#back-to-top a:hover,
#back-to-top a:focus {
    background-color: oklch(from var(--teal) l c h / 0.75);
}

#back-to-top a svg {
    fill: #ffffff99;
    transition-property: fill;
    transition-duration: 0.25s;
}
#back-to-top a:hover svg,
#back-to-top a:focus svg {
    fill: #ffffffff;
}





/* -- Cards -- */

.card h3, .card h4, .card h5, .card h6 { grid-area: title; }
.card p { grid-area: desc; }
.card img, .card .image { grid-area: image; }

.card {
    position: relative;
    display: grid;
    gap: var(--u1);
    padding: var(--u2);
    border-radius: var(--u2);
    overflow: hidden;
    background: oklch(from var(--tan-l2) l c h / 0.9);
    outline: 4px solid #ffffff22;
    outline-offset: 0px;
    transition-property: transform, background-color, color, box-shadow, outline-width, outline-color, outline-offset;
    transition-duration: 0.33s;
}
.card:hover, .card:focus-within {
    background-color: oklch(from var(--tan) 0.12 c h / 0.65);
    color: #fff;
    outline-color: #ffffff33;
    outline-offset: 4px;
    transform: translateY(-5px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.card h3 a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}



/* -- used on journey landing pages -- */
.card.subpage {
    grid-template-areas:
        "image title"
        "desc desc"
    ;
    grid-template-columns: 80px 1fr;
    grid-template-rows: min-content max-content;
    column-gap: var(--u2);
}

/* color values defined here are used and adapted by child and pseudo elements below */
.veterans .card.subpage { color: var(--teal); }
.providers .card.subpage { color: var(--blue-d1); }
.about .card.subpage { color: var(--blue); }
.community .card.subpage { color: var(--tan); }

.card.subpage h3 { 
    width: 100%;
    margin: 0; 
    padding: 0;
    align-self: center;
}

.card.subpage h3 a {
    width: 100%;
    color: oklch(from currentColor calc(l * 0.675) c h);
    font-family: "d-din-bold","Arial Narrow", "sans-serif";
    font-size: var(--u4);
    transition-property: color;
    transition-duration: 0.25s;
}

.card.subpage p { 
    align-self: center;
    margin: 0; 
    padding: 0; 
    color: oklch(from currentColor calc(l * 0.675) c h);
}

.card.subpage .image {
    display: inline-flex;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    align-content: center;
    transition-property: background-color;
    transition-duration: 0.25s;
    --icon-color: currentColor;
}

.card.subpage:hover, .card.subpage:focus-within {
    /* border: 8px solid oklch(from var(--red) l c h / 1.0);
    border-width: 0px 8px 0px 8px; */
    color: var(--tan-l2);
}

.card.subpage h3 a:hover, 
.card.subpage h3 a:focus {
    color: var(--tan-l2);
    text-decoration: none;
}

.card.subpage:hover *,
.card.subpage:focus-within * {
    color: currentColor;
    --iconColor: currentColor;
}


/* -- Tiles -- */

.tile {
    position: relative;
    padding: var(--u1);
    overflow: hidden;
    border-radius: var(--u1);
    background-color: #ffffff00;
    transition-property: transform, background-color, color, box-shadow;
    transition-duration: 0.33s;
}

.tile:hover, .tile:focus-within {
    background-color: oklch(from var(--tan) 0.99 c h / 0.8);
    transform: translateY(-2px);
    box-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

.tile a {
    width: 100%;
    font-family: "d-din-bold", "Arial Narrow", sans-serif;
    font-size: 1.25em;
    letter-spacing: 0.05rem;
}
.tile a:hover, .tile a:focus {
    text-decoration: none;
}

.tile a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}


/* -- Events and Calendar -- */

.tile.event .date { grid-area: date; }
.tile.event .name { grid-area: name; }
.tile.event .desc { grid-area: desc; }

.tile.event {
    display: grid;
    grid-template-areas: 
        "date name"
        "date desc"
    ;
    grid-template-columns: 6ch 1fr;
    grid-template-rows: min-content max-content;
    gap: var(--u1);
}

.compact .tile.event {
    display: grid;
    grid-template-areas: 
        "date name"
    ;
    grid-template-columns: 6ch 1fr;
    grid-template-rows: max-content;
    gap: var(--u1);
}

.tile.event .date {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--u1);
    border: 1px solid var(--tan);
    border-radius: var(--uf2);
    font-family: "d-din-bold", "Arial Narrow", "sans-serif";
    background-color: oklch(from var(--tan) 0.99 c h / 0.9);
}

.tile.event .date .day {
    font-family: inherit;
    font-size: var(--u4);
    letter-spacing: 0.06rem;
    line-height: var(--u4);
    color: var(--teal);
}
.tile.event .date .month {
    font-family: inherit;
    font-size: var(--u2);
    line-height: var(--u2);
    letter-spacing: 0.06rem;
    text-transform: uppercase;
    color: var(--red);
}

.tile.event a.name {
    font-family: "d-din-bold", "Arial Narrow", "sans-serif";
    font-size: 1.25rem;
    letter-spacing: 0.04rem;
    line-height: 1em;
    align-content: center;
}

.tile.event a.name:hover, .tile.event a.name:focus {
    text-decoration: none;
}

.tile.event .name, .tile.event .desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-content: center;
}

.tile.event .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-content: center;
}

.compact .tile.event .name { white-space: wrap; }
.compact .tile.event .desc { display: none; }

.events-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

/* -- Resources -- */
.resource-list {
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto; */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--u1);
}

.tile.resource a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--u1);
    line-height: 1em;
}

.tile.resource { 
    position: relative; 
    width: 100%;
}

.tile.resource a:before {
    position: relative;
    flex-basis: 16px;
    flex-shrink: 0;
    top: 0;
    left: 0;
    content: "";
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-image: url('/img/icon-star.svg');
    mask-size: cover;
    mask-position: center;
    mask-repeat: no-repeat;
}

.tile.resource a[href$='.pdf']:before,
.tile.resource a[href$='.zip']:before,
.tile.resource a[href$='.pptx']:before,
.tile.resource a[href$='.docx']:before,
.tile.resource a[href$='.csv']:before,
.tile.resource a[href$='.xlsx']:before {
    mask-image: url('/img/icon-file.svg');
}

.tile.resource a[href$='.html']:before,
.tile.resource a[href$='.htm']:before,
.tile.resource a[href$='.php']:before,
.tile.resource a[href$='.aspx']:before,
.tile.resource a[href$='.asp']:before,
.tile.resource a[href$='.jsp']:before,
.tile.resource a[href$='.cfm']:before,
.tile.resource a[href$='.shtml']:before {
    mask-image: url('/img/icon-link.svg');
}

.tile.resource a[download]:before {
    mask-image: url('/img/icon-download.svg');
}



/* -- Accordion (from WGAG-ARIA pattern) (https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) -- */

.accordion {
  margin: 0;
  padding: 0;
  border: 2px solid hsl(0deg 0% 52%);
  border: 2px solid oklch(from var(--tan) 0.89 c h);
  border-radius: 7px;
  /* width: 20em; */
}

.accordion h3, .accordion h4 {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  font-family: "baskerville","Georgia",serif;
}

.accordion:focus-within {
  /* border-color: hsl(216deg 94% 43%); */
  border-color: oklch(from var(--teal) 0.75 c h);
}

.accordion:focus-within h3, .accordion:focus-within h4 {
  background-color: hsl(0deg 0% 97%);
}

.accordion > * + * {
  border-top: 1px solid oklch(from var(--teal) 0.85 c h);
}

.accordion-trigger {
  background: none;
  color: hsl(0deg 0% 13%);
  display: block;
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  padding: 1em 1.5em;
  position: relative;
  text-align: left;
  width: 100%;
  outline: none;
  font-weight: 800;
  cursor: pointer;
}

.accordion-trigger:focus,
.accordion-trigger:hover {
  /* background: hsl(216deg 94% 94%); */
  background: oklch(from var(--tan) 0.99 c h / 0.8);
}

/* .accordion-trigger:focus {
  outline: 4px solid transparent;
} */

.accordion > *:first-child .accordion-trigger,
.accordion > *:first-child {
  border-radius: 5px 5px 0 0;
}

button {
  border-style: none;
}

.accordion button::-moz-focus-inner {
  border: 0;
}

.accordion-title {
  display: block;
  pointer-events: none;
  border: transparent 2px solid;
  border-radius: 5px;
  padding: 0.25em;
  outline: none;
}

/* .accordion-trigger:focus .accordion-title {
  border-color: hsl(216deg 94% 43%);
  border-color: oklch(from var(--teal) 0.75 c h);
} */

.accordion-icon {
  border: solid currentcolor;
  border-width: 0 2px 2px 0;
  height: 0.5rem;
  pointer-events: none;
  position: absolute;
  right: 2em;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 0.5rem;
}

.accordion-trigger:focus .accordion-icon,
.accordion-trigger:hover .accordion-icon {
  /* border-color: hsl(216deg 94% 43%); */
  border-color: oklch(from var(--blue) 0.5 c h);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: translateY(-50%) rotate(-135deg);
}

.accordion-panel {
  margin: 0;
  padding: 1em 1.5em;
}

/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
.accordion-panel[hidden] {
  display: none;
}

/* -- end accordion -- */


/* -- Calendar -- */

.calendar iframe {
    width: 100%;
    min-height: 400px;
    margin: 0;
    padding: 0;
}

/* -- end calendar -- */


.page-icons {
    /* display: inline-block; */
    width: 120px;
    height: 120px;
    --icon-color: currentColor;
}


/* -- Form items -- */

input[type=text], input[type=email], input[type=phone], textarea {
    padding: var(--uf2) var(--u1);
    border-radius: var(--u1);
    border: 1px solid var(--tan);
    font-family: "baskerville", serif;
    font-size: 1.125rem;
}
label {
    font-family: "d-din-bold", "Arial Narrow", sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.075rem;
}

input[type=submit]:hover {
    cursor: pointer;
}

input[type=submit]:hover, 
input[type=submit]:focus {
    background-color: var(--blue-l1);
}

form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--u1);
    width: 100%;
}

form .text-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    margin: 0;
}
.text-field input {
    order: 1;
    flex-basis: 100%;
    width: 100%;
    font-size: 16px;
}
.text-field textarea {
    order: 1;
    flex-basis: 100%;
    flex-grow: 1;
    width: 100%;
}
.text-field label {
    order: 0;
    flex-basis: auto;
    text-align: right;
}
.txt-field span::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 0;
    width: 0%;
    height: 2px;
    background: #2691d9;
    transition: .5s;
}
.text-field input:focus,
.text-field input:valid,
.text-field textarea:focus,
.text-field textarea:valid  {
    background-color: #ffffcd
}
.text-field input:focus ~ span::before,
.text-field input:valid ~ span::before {
    width: 100%;
}

form input[type=submit] {
    width: 50%;
    align-self: center;
    margin: var(--u2) 0;
}

/* -- Feature Sections -- */

.feature h2 { grid-area: title; }
.feature a.btn-more,
.feature .toggle { grid-area: more; }
.feature .content { grid-area: content; }
.feature .graphic { grid-area: graphic; }
.feature .detail { grid-area: detail; }

.feature {
    max-width: unset;
    display: grid;
    grid-template-areas: 
        "title"
        "content"
        "more"
    ;
    grid-template-columns: 100%;
    grid-template-rows: min-content auto auto;
    width: 100%;
    padding: 0 var(--u3);
    /* background-color: #ffffcd; */
}

.feature.left.visual,
.feature.right.visual {
    grid-template-areas: 
        "title graphic"
        "content content"
        "more more"
    ;
    grid-template-columns: auto var(--u10);
    grid-template-rows: max-content min-content min-content;
}

.feature.center {
    grid-template-areas: 
        "title"
        "content"
        "more"
    ;
    grid-template-columns: 100%;
}



.feature h2 { align-self: center; }

.feature .content { align-self: center; }

.feature.visual > .graphic {
    width: var(--u10);
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    align-self: center;
}

.feature .graphic {
    background:
        linear-gradient(0deg,  
        rgb(from var(--lightcolor) r g b / 0.25) 20%,
        rgb(from var(--darkcolor) r g b / 0.25) 100%); 
    ;
}

.feature.right .graphic {
    background:
        linear-gradient(135deg,  
        rgb(from var(--lightcolor) r g b / 0.25) 10%,
        rgb(from var(--darkcolor) r g b / 0.25) 100%); 
    ;
}

.feature.left .graphic {
    background:
        linear-gradient(225deg,  
        rgb(from var(--lightcolor) r g b / 0.25) 10%,
        rgb(from var(--darkcolor) r g b / 0.25) 100%); 
    ;
}


/* Pilot Feature */
.feature.pilot {
    grid-template-areas: 
        ". title title graphic graphic ."
        ". detail detail graphic graphic ."
        ". more . graphic graphic ."
        ". . content content . ."
    ;
    grid-template-columns: 1fr 5ch 28ch 28ch 5ch 1fr;
    grid-template-rows: auto auto auto min-content;
    background:
        linear-gradient(
            to top,
            oklch(from var(--blue-l2) 0.95 0.05 h / 0.3) 0%,
            oklch(from var(--blue-l2) 0.95 0.035 h / 1) 60%
        )
    ;
    padding: var(--u4) 0 0 0;
}

.feature.pilot .detail {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--u2);
}
.feature.pilot .graphic {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.feature.pilot .graphic img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.feature.pilot .content {
    transition-property: height;
    transition-duration: 0.33s;
    padding-bottom: var(--u2);
}
.feature.pilot button.toggle {
    width: 24px;
    height: 24px;
    justify-self: end;
}
.feature.pilot button.toggle i.icon {
    width: 16px;
    height: 16px;
}
.feature.pilot button.toggle[aria-expanded="true"] i.icon {
    mask-image: url("/img/icon-close.svg"); 
}

/* Feature graphic backgrounds */
.cool .graphic {
    --lightcolor: rgb(from var(--teal-l1) r g b);
    --darkcolor: rgb(from var(--blue) r g b);
}

.warm .graphic{
    --lightcolor: rgb(from var(--tan-d1) r g b);
    --darkcolor: rgb(from var(--red) r g b);
}

.earth .graphic {
    --lightcolor: rgb(from var(--tan) r g b);
    --darkcolor: rgb(from var(--tan-d2) r g b);
}

.brand .graphic {
    --lightcolor: rgb(from var(--tan-d2) r g b);
    --darkcolor: rgb(from var(--tan-d2) r g b);
}

.feature.visual.about .graphic {
    -webkit-mask-image: url('/img/cpivh-icon-submark-black.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('/img/cpivh-icon-submark-black.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.feature.visual.resources .graphic {
    -webkit-mask-image: url('/img/cpivh-icon-taro-leaf.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('/img/cpivh-icon-taro-leaf.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.feature.visual.connect .graphic {
    -webkit-mask-image: url('/img/cpivh-icon-bird.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('/img/cpivh-icon-bird.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.feature.visual.events .graphic {
    -webkit-mask-image: url('/img/cpivh-icon-bird.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('/img/cpivh-icon-bird.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


/* End content page specific styles */

/* Medium screens */
@media (min-width: 480px) {

    

    .events-list {
        display: grid;
        grid-template-columns: 0.5fr 0.5fr;
        grid-template-rows: fill fill;
        gap: var(--u1);
    }

    /* -- Feature Sections -- */

    .feature {
        grid-template-areas: 
            ". title ."
            ". content ."
        ;
        grid-template-columns: 1fr minmax(280px, 400px) 1fr;
        grid-template-rows: min-content auto;
    }

    .feature.left.visual, 
    .feature.right.visual {
        grid-template-areas: 
            "title title more"
            "content content graphic"
        ;
        grid-template-columns: 16ch auto 16ch;
        grid-template-rows: min-content max-content;
    }

    .feature.right.visual.about {
        grid-template-areas: 
            "title title"
            "content graphic"
        ;
        grid-template-columns: auto 16ch;
    }

    .feature.center {
        grid-template-areas: 
            "title more"
            "content content"
        ;
        grid-template-columns: minmax(280px, 400px) 16ch;
    }

    .feature .graphic { align-self: start; }

    .feature.visual > .graphic {
        width: 100%;
        height: auto;
    }

    
}

/* -- Large screens -- */
/* full nav exposed */
@media (min-width: 768px) {
    
    nav#site-nav {
        order: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--u2);
        padding: 0 var(--u1) 0 var(--u1);
    }

    nav#site-nav button#mobile-menu-toggle {
        display: none;
    }

    nav#site-nav #logo-nav {
        flex-basis: 132px;
    }

    nav#site-nav #logo-nav a {
        width: unset;
        height: unset;
        max-height: 48px;
        padding: 0;
    }

    nav#site-nav #logo-nav .logo {
        width: 120px;
        height: auto;
    }

    nav#site-nav #main-menu {
        visibility: visible;
        opacity: 1;
        position: relative;
        top: unset;
        left: unset;
        right: unset;
        flex-shrink: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: unset;
        box-shadow: unset;
        border: unset;
        gap: var(--u1);
        padding: 0 0;
    }

    nav#site-nav #main-menu ul {
        width: 100%;
        flex-grow: 1;
        /* flex-shrink: 1; */
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: flex-start;
        gap: var(--u1);
        list-style: none;
        margin: 0;
        padding: 0 0;
    }

    nav#site-nav #main-menu ul li {
        flex-shrink: 1;
        width: auto;
        border: unset;
    }

    nav#site-nav #main-menu ul li a {
        position: relative;
        width: auto;
        /* height: 32px; */
        height: unset;
        font-size: 1rem;
        padding: var(--u2) var(--u1);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    nav#site-nav #main-menu ul li a.current:before {
        position: absolute;
        top: unset;
        bottom: 0;
        left: calc(50% - 8px);
        display: block;
        content: "";
        width: 0px;
        height: 0px;
        border: 8px solid var(--red);
        border-color: transparent transparent oklch(from var(--red) l c h / 1) transparent;
        background-color: unset;
    }

    nav#site-nav #main-menu ul li:has(> a.drop) {
        display: none;
    }

    

    nav#site-nav #main-menu #search-form {
        /* width: auto; */
        flex-basis: 20%;
        flex-shrink: 2;
        border: unset;
        padding: 0 0;
        background-color: yellow;
    }

    nav#site-nav #search-form input {
        flex-basis: unset;
        width: calc(100% - 32px);
        box-sizing: border-box;
        height: 24px;
        padding: var(--uf4) var(--uf2);
        border: 2px solid var(--tan);
        border-right-width: 0px;
        border-radius: var(--u1) 0 0 var(--u1);
        font-family: "d-din";
        font-weight: 400;
        text-transform: none;
    }
    nav#site-nav #search-form button {
        width: 32px;
        height: 24px;
        padding: var(--uf4) var(--uf2);
        border-radius: 0 var(--u1) var(--u1) 0;
        background-color: var(--blue);
        cursor: pointer;
    }

    .card.subpage {
        grid-template-areas:
            "image title"
            "image desc"
        ;
        grid-template-columns: 120px 1fr;
        grid-template-rows: min-content max-content;
        column-gap: var(--u2);
    }

    .card.subpage .image {
        display: inline-flex;
        width: 120px;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        align-content: center;
        transition-property: background-color;
        transition-duration: 0.25s;
        --icon-color: currentColor;
    }

    footer {
        display: grid;
        grid-template-areas: 
            "branding links"
            "extras links"
            "copyright copyright";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        width: 100%;
        padding: var(--u3) var(--u3);
        background-color: var(--blue-d1);
        color: #fff;
    }

    /* section > h2 {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }
    section > h2 > a {
        flex-grow: 0;
        flex-shrink: 0;
        align-self: flex-end;
    } */

    form .text-field { 
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
    }

    form .text-field {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        gap: var(--u1);
        width: 100%;
        margin: 0;
    }
    .text-field input {
        flex-basis: 70%;
        flex-grow: 1;
        flex-shrink: 1;
        font-size: 16px;
    }
    .text-field textarea {
        flex-basis: 70%;
        flex-grow: 1;
    }
    .text-field label {
        order: 0;
        flex-basis: 12ch;
        flex-grow: 0;
        flex-shrink: 1;
        text-align: right;
    }

    form input[type=submit] {
        width: 80%;
        align-self: end;
        margin: var(--u2) 0;
    }

    .resource-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: max-content;
        gap: var(--u1);
    }

    .resource-list li { align-self: center; }

    /* -- Feature Sections -- */

    .feature {
        grid-template-areas: 
            ". title ."
            ". content ."
        ;
        grid-template-columns: 1fr 66ch 1fr;
        grid-template-rows: min-content auto;
    }

    .feature.left.visual {
        grid-template-areas: 
            ". graphic title more ."
            ". graphic content content ."
        ;
        grid-template-columns: 1fr 23ch 27ch 16ch 1fr;
    }

    .feature.right.visual {
        grid-template-areas: 
            ". title more graphic ."
            ". content content graphic ."
        ;
        grid-template-columns: 1fr 27ch 16ch 23ch 1fr;
    }

    .feature.right.visual.about {
        grid-template-areas: 
            ". title graphic ."
            ". content graphic ."
        ;
        grid-template-columns: 1fr 43ch 23ch 1fr;
    }

    .feature.center {
        grid-template-areas: 
            ". title more ."
            ". content content ."
        ;
        grid-template-columns: 1fr 50ch 16ch 1fr;
    }

    
}

/* Large screens */
@media (min-width: 960px) {

    nav#site-nav #main-menu ul li:has(> a.drop) {
        display: block;
    }
    

    .content header {
        display: grid;
        grid-template-areas: 
            "breadcrumbs breadcrumbs breadcrumbs"
            ". title ."
            ". summary ."
            ". read-time .";
        grid-template-columns: 0.5fr 640px 0.5fr;
        grid-template-rows: auto auto auto auto;
    }
    
    .content header h1:before { display: none; } 

    .content header h1 { 
        text-align: left;
        font-size: 3rem; 
        line-height: 1.1;
    }
    .content header h1:before { 
        top: var(--u2);
        left: calc(-1 * var(--u9));
        width: var(--u9);
        height: var(--u9);
        display: block; 
    }

    .breadcrumbs { 
        display: flex;
    }

    footer {
        display: grid;
        grid-template-areas: 
            "branding links extras"
            "copyright copyright copyright";
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        width: 100%;
        padding: var(--u3) var(--u3);
        background-color: var(--blue-d1);
        color: #fff;
    }

    /* -- Feature Sections -- */

    .feature {
        width: 100%;
        display: grid;
        grid-template-areas: 
            ". title graphic ."
            ". content graphic ."
        ;
        grid-template-columns: 1fr 43ch 23ch 1fr;
        grid-template-rows: min-content auto;
    }

    .feature.left.visual {
        grid-template-areas: 
            ". graphic title more ."
            ". graphic content content ."
        ;
        grid-template-columns: 01fr 23ch 27ch 16ch 1fr;
    }

    .feature.right.visual {
        grid-template-areas: 
            ". title more graphic ."
            ". content content graphic ."
        ;
        grid-template-columns: 1fr 27ch 16ch 23ch 1fr;
    }

    .feature.center {
        grid-template-areas: 
            ". title more ."
            ". content content ."
        ;
        grid-template-columns: 1fr 50ch 16ch 1fr;
    }

}


@media (prefers-reduced-data: reduce) {
    /* Styles for users who prefer reduced data usage (e.g., hide high-res images, disable video autoplay) */

    body {
        background: unset;
        background-color: var(--tan-l2);
    }

    header {
        background-image: unset;
        background-color: var(--tan-l1);
    }

    .card:hover, .card:focus-within {
        transform: unset;
    }

}