/*--- VARIABLES/COMMON VALUES ---*/
:root {

    --neutral-black-color:#000; /*--- general background ---*/
    --neutral-white-color:#fff; /*--- general background ---*/

    --theme-light-color:#c0b4cc; /*--- general text, header links ---*/
    /*--theme-medium-color:#897b9a; --- footer note text; ~minumum brightness on black background ---*/
    --theme-medium-color:#7c6F90; /*--- footer note text; ~minumum brightness on black background ---*/
    --theme-dark-color:#45414a; /*--- subtle lines, borders ---*/
    --theme-deep-color:#280350; /*--- background gradient ---*/
    /*--theme-bold-color:#a64eff; --- heading text ---*/
    --theme-bold-color:#ab57ff; /*--- heading text ---*/

    /*--theme-secondary-color:#ca00c2;  --- subheadings ---*/
    /*--theme-secondary-color:#cd2ce7;  --- subheadings ---*/
    --theme-secondary-color:#d23ae9;  /*--- subheadings ---*/

    --common-spacing:1.5rem;
    --common-radius:.2rem;
    --common-border:.05rem solid var(--theme-dark-color);
    --common-letter-spacing:-.025em;



}




/*--- RESET/NORMALIZE ---*/
body, h1, h2, h3, h4, h5, h6, figure, pre, dl, dd, blockquote, input[type="radio"], input[type="checkbox"] {margin:0}
legend {padding:0}
fieldset, ul, ol {padding:0;margin:0}
ul, ol {list-style:none}
body {line-height:1}
main, figure, figcaption, img {display:block} /*--- <main> for IE 11 ---*/
img {display:block;max-width:100%;height:auto}
a {text-decoration:none}
fieldset {border:0}
input, textarea, select, button {display:block;max-width:100%;font-family:inherit;font-size:inherit;color:inherit}
label {}
input[type="text"], input[type="email"], input[type="password"], input[type="search"] {-webkit-appearance:none} /*--- for Safari (add/remove types as needed) ---*/
button {line-height:inherit}
button::-moz-focus-inner {border:0} /*--- for Firefox ---*/
html {text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:1.25em} /*--- base font size to 20px (from typical 16px) ---*/




/*--- BASE/COMMON -------------------------------------------*/
body {min-width:14em;max-width:60em;padding:0 clamp(.5rem, 2vw, 1rem);background-color:var(--neutral-black-color);font-family:sans-serif;line-height:1;color:var(--theme-light-color);margin:0 auto}

    @media (min-width:75em) {
        body {overflow-x:hidden}
    }


    /*--- headings ---*/
    h1, h2, h3, h4 {font-family:'Georgia', serif;line-height:1.2;color:var(--theme-bold-color);text-transform:lowercase;margin:0 0 var(--common-spacing)}
        h1 {font-size:1.8em;text-align:center}
        h2 {font-size:1.2em;color:var(--theme-secondary-color)}
        h3 {font-size:1em}
        :is(h1, h2, h3, h4, p) span {display:inline-block}


    /*--- general text ---*/
    p {font-size:.85em;line-height:1.2;margin:0 0 1rem}


    /*--- links ---*/
    a {color:var(--theme-bold-color);transition:color .2s}
        a:is(:hover, :focus) {color:var(--theme-secondary-color)}


    /*--- section rule ---*/
    hr {border:none;border-top:var(--common-border);margin:var(--common-spacing) 0}


    /*--- form elements ------------------------------*/
    input {padding:.5em .5em;background-color:var(--neutral-white-color);border:none;border-radius:var(--common-radius);font-size:.85em;color:var(--neutral-black-color)}

            /*--- placeholder text ---*/
            ::placeholder {color:var(--theme-medium-color);opacity:1} /*--- opacity for Firefox ---*/

                /*--- focus state ---*/
                :focus::placeholder {opacity:0;transition:opacity .2s .5s}


    /*--- bullet list ---------*/
    :is(.bullet-list, .project > div > ul:not([class])) {display:flex;flex-direction:column;gap:1rem;margin:0 0 var(--common-spacing)}
        :is(.bullet-list, .project > div > ul:not([class])) li {display:flex;gap:.4em;font-size:.85em}
            :is(.bullet-list, .project > div > ul:not([class])) li::before {flex:0 0 1em;width:1em;height:1em;background-color:var(--theme-bold-color);border-radius:50%;font-size:.4em;margin:.9em 0 0;content:""}


    /*--- buttons --------------------*/
    button {padding:.5em .5em;background-color:var(--theme-bold-color);border:none;border-radius:var(--common-radius);font-size:.85emem;color:var(--neutral-white-color);letter-spacing:var(--common-letter-spacing);text-transform: lowercase}
        form button:is(:hover, :focus) {filter:brightness(.8) saturate(1.2) contrast(2)}


    /*--- link/button group ---------*/
    .button-group {display:flex;flex-wrap:wrap;justify-content:center;gap:.25em;margin:0 0 var(--common-spacing)}
        .button-group li {}

            .button-group :is(a, button) {display:block;padding:.2em .4em .35em .4em;background-color:transparent;border:var(--common-border);border-radius:var(--common-radius);font-size:.85em;text-transform:lowercase;color:var(--theme-bold-color);transition:border-color .2s, color .2s}
                /*.button-group :is(a, button):is(:hover, :focus) {border-color:var(--theme-bold-color);color:var(--theme-bold-color)}*/
                .button-group :is(a, button):is(:hover, :focus) {color:var(--theme-secondary-color)}

                /*--- active item ---*/
                /*.button-group .active :is(a, button) {background-color:var(--theme-light-color);color:var(--neutral-black-color)}*/
                .button-group :is(.active :is(a, button), .active:is(a, button)) {background-color:var(--theme-secondary-color);border-color:var(--theme-secondary-color) !important;color:var(--neutral-black-color) !important}

                /*--- disabled item ---*/
                .button-group :is(a, button):disabled {color:var(--theme-dark-color)}


    /*--- breakout box ---------*/
    :is(.breakout, .faq > li) {padding:.5rem;border:var(--common-border);border-radius:var(--common-radius);margin:0 0 calc(var(--common-spacing) * .6666666666666)}
        :is(.breakout, .faq > li) :is(h2, h3):first-child {margin-bottom:1rem}
        :is(.breakout, .faq > li) :last-child {margin-bottom:0}



    /*--- standard image positioning (bare <img> or with <figure> wrapper) -----------*/
    .content-image {display:block;max-width:90%;margin:1em auto}
        .content-image img {border:var(--common-border)}

        /*---captions---*/
        .content-image figcaption {padding:.5em 0 0;font-size:.8em;font-style:italic}

        /*---centered by default with optional left/right class---*/
        @media (min-width:600px) {
            .content-image.left, .content-image.right {max-width:50%}
            .content-image.left {float:left;margin-left:0;margin-right:2em}
            .content-image.right {float:right;margin-left:2em;margin-right:0}
        }

        /*---no border option---*/
        .content-image.no-border {border:none}
            .content-image img {border:none}

    figure.content-image {display:table}
    img.content-image {border:var(--common-border)}

            /*--- Janet image ---*/
            .content-image.janet-image {}

                @media (min-width:1050px) {
                    .content-image.janet-image {max-width:18em;margin-top:-2em}
                }




/*--- social links ------------------------*/
.social-links {display:grid;grid-template-columns:repeat(auto-fill, minmax(6.5em, 1fr));gap:1em;margin:0 0 var(--common-spacing)}
    .social-links li {}
        .social-links a {display:flex;align-items:center;gap:.75rem;width:fit-content;padding:0 1em 0 0;font-size:.8em}

            /*--- icon ---*/
            .social-links a::before {box-sizing:border-box;width:1em;height:1em;padding:.2em;background:url('../img/social-icons-sprite.svg') no-repeat calc(-1.2em * var(--social-icon-position, 0)) center / auto 100%, var(--social-icon-gradient, none), linear-gradient(var(--social-icon-color, var(--theme-bold-color)), var(--social-icon-color, var(--theme-bold-color)));background-clip:content-box, border-box, border-box;background-origin:content-box, border-box, border-box;border-radius:var(--common-radius);font-size:2em;position:relative;overflow:hidden;cursor:pointer;transition:filter .2s;content:""}

            /*--- icons ---*/
            .social-links .facebook a::before {--social-icon-color:#3b5998;padding-bottom:0;padding-top:.3em}
            .social-links .bluesky a::before {--social-icon-color:#1185fe;--social-icon-position:1}
            .social-links .linkedin a::before {--social-icon-color:#0077b5;--social-icon-position:2}
            .social-links .instagram a::before {--social-icon-position:3;--social-icon-gradient:radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%)}
            .social-links .youtube a::before {--social-icon-color:#cd201f;--social-icon-position:4}
            .social-links .pinterest a::before {--social-icon-color:#bd081c;--social-icon-position:5}
            .social-links .vimeo a::before {--social-icon-color:#1ab7ea;--social-icon-position:6}
            .social-links .pixelfed a::before {--social-icon-color:#d438af;--social-icon-position:7;/*--social-icon-gradient:conic-gradient(#ffa10a, #0de552, #00c2f8, #d332ac, #f32848, #ffa10a)*/}
            .social-links .mastodon a::before {--social-icon-color:#615FF8;--social-icon-position:8}











            .social-links-OFF .pixelfed a::after {font-size:.6em}




/*
.video-test {display:block;width:100%;max-width:20em;height:auto;border:var(--common-border);border-radius:var(--common-radius);position:relative;margin:0 auto;transition:border-color .2s}
.video-test:is(:hover, :focus) {border-color:var(--theme-bold-color)}*/
    /*.video-test::before {box-sizing:border-box;display:block;height:1em;width:1em;background-color:rgba(0,0,0,.6);border:.05em solid #fff;border-radius:50%;box-shadow:0 0 .15em 0 rgba(0,0,0,.6);position:absolute; top:50%; left:50%;z-index:10;font-size:3em;margin:-0.5em 0 0 -0.5em;transition:background-color .2s;content:""}
    .video-test::after {display:block;width:0;height:0;border:0 solid transparent;border-width:.2em 0 .2em .3em;border-left-color:#fff;position:absolute;top:50%;left:50%;z-index:10;font-size:3em;margin:-0.2em 0 0 -0.1em;content:""}*/



/*--- VIDEO ---------------------------------------------*/

    /*--- content video (iframe embed) ---------*/
    .content-video {display:block;clear:both;width:100%;max-width:40rem;border:var(--common-border);border-radius:var(--common-radius);margin:1em auto 1em;position:relative}
        .content-video::before {display:block;padding:56.25% 0 0;content:""} /*---padding sets video proportion---*/
        .content-video iframe {display:block;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}

    /*--- content video (JW player) ----------------*/
    #video-player {max-width:40rem;border:var(--common-border);border-radius:var(--common-radius);margin:0 auto var(--common-spacing);transition:border-color .2s}
        #video-player:is(:hover, :focus) {border-color:var(--theme-bold-color)}


        /*--- on-demand video --------------------------------*/
        .embedded-video {clear:both;max-width:1000px;background-color:#000;border:var(--common-border);border-radius:var(--common-radius);position:relative;margin:0 auto 1em}
            .embedded-video::before {display:block;padding-top:56.25%;content:""}

            /*--- square proportion ---*/
            .embedded-video.square {max-width:563px}
                .embedded-video.square::before {padding-top:98.9%}

            /*--- 4:3 proportion ---*/
            .embedded-video.standard {max-width:750px}
                .embedded-video.standard::before {padding-top:75%}

            /*--- link and iframe ---*/
            .embedded-video a, .embedded-video iframe {display:block;width:100%;height:100%;position:absolute;top:0}
                .embedded-video iframe {border:0}

                /*--- play button ---*/
                .embedded-video a::before {box-sizing:border-box;display:block;height:1em;width:1em;background-color:#a64eff;border:.04em solid #fff;border-radius:50%;box-shadow:0 0 .1em 0 rgba(0,0,0,0.6);position:absolute;top:50%;left:50%;z-index:1;font-size:2.5em;margin:-.5em 0 0 -.5em;opacity:.8;transition:opacity .2s;content:""} /*--- circle ---*/
                .embedded-video a::after {display:block;width:0;height:0;border:0 solid transparent;border-width:.2em 0 .2em .3em;border-left-color:#fff;position:absolute;top:50%;left:50%;z-index:1;font-size:2.5em;margin:-.2em 0 0 -.1em;content:""} /*--- triangle ---*/

                     /*--- hover/focus state ---*/
                    .embedded-video a:hover::before, .embedded-video a:focus::before {opacity:1}

                /*--- image ---*/
                .embedded-video img {object-fit:cover;height:100%;width:100%}







/*--- IMAGE GALLERY -------------------------------------------------*/
.image-gallery {display:flex;flex-direction:column;gap:1em}

    /*--- main image ---*/
    .image-gallery div {padding:100% 0 0;position:relative}
        .image-gallery div img {width:auto;height:auto;max-height:100%;border:var(--common-border);border-radius:var(--common-radius);position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;transition:border-color .2s}

        /*--- loading state ---*/
        .image-gallery div.loading {}
            .image-gallery div.loading img {border-color:var(--theme-light-color);transition-duration:1s}

    /*--- thumbnails ---*/
    .image-gallery ul {display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%/4, max(4em, 100%/7)), 1fr));gap:.5em}
        .image-gallery li {}
            .image-gallery ul a {display:block;padding:100% 0 0;border:var(--common-border);border-radius:var(--common-radius);position:relative;overflow:hidden;transition:border-color .2s}
                .image-gallery ul a:is(:hover, :focus) {border-color:var(--theme-bold-color)}
                .image-gallery ul img {object-fit:cover;width:100%;height:100%;position:absolute;top:0}

        /*--- active item ---*/
        .image-gallery .active a {border-color:var(--theme-bold-color);pointer-events:none}





/*--- HEADER -------------------------------------------*/
header.site {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5em;padding:.5em 0;background-color2:var(--neutral-black-color);border-bottom2:.05em solid var(--theme-dark-color);font-family:'Georgia', serif}

    @media (min-width:42.4375em) {
        header.site {justify-content:space-between}
    }


    /*--- logo -------------*/
    header.site > a {display:grid;grid-template-columns:3em 1fr;gap:.2em .5em;font-size:.7em}
        header.site > a:not(:hover, :focus) {color:var(--theme-light-color)}
        header.site > a:is(:hover, :focus) {color:var(--theme-bold-color)}

        /*--- logo shape ---*/
        header.site > a::before {grid-row:1/3;align-self:center;width:3em;height:3em;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI2MCIgaGVpZ2h0PSIyNjAiIHZpZXdCb3g9IjAuMSAtMC4yIDI2MCAyNjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMC4wNiAtMC4xOSAyNjAgMjYwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzExMTExMSIgZD0iTTEzMCAwQzU4LjIgMCAwIDU4LjIgMCAxMzBzNTguMiAxMzAgMTMwIDEzMGM3MS44IDAgMTMwLTU4LjIgMTMwLTEzMFMyMDEuOCAwIDEzMCAwek0xMjkuMiAyNDNjLTYyLjIgMC0xMTIuNi01MC40LTExMi42LTExMi42UzY3IDE3LjggMTI5LjIgMTcuOGM2Mi4yIDAgMTEyLjYgNTAuNCAxMTIuNiAxMTIuNlMxOTEuNCAyNDMgMTI5LjIgMjQzeiIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMTExMTExIiBkPSJNMjQyIDEyMi4xYy0xMC40IDk5LjctMTUyLjQgMTE3LjgtMTc5LjIgNTkuOCAtMTguMS0zOS4xIDE2LjktNDguMiA2OS00OC43IDQ5LjQtMC41IDc3LjQtOS41IDY2LjMtNDEuNkMxNzQgMjIuNSAxMC43IDQ1LjcgMTYuNSAxNDEuM2MxLjEgOC41IDQuOSA1MS41IDM0LjkgNzguMyAyMS43IDE5LjQgNTIuOCAzMC4xIDgxLjEgMzAgMjYuNyAwIDU2LjgtMTAgNzcuOC0zMS4xIDExLjMtMTEuMyAyMi4xLTI4LjEgMjkuMy00Ni4zQzI0NS42IDE1NyAyNDUuMiAxNDEuMyAyNDIgMTIyLjF6TTkwLjcgODMuMWg2OS43djIwLjhIOTAuN1Y4My4xeiIvPjxyZWN0IHg9IjkwLjEiIHk9IjE1Ni44IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzExMTExMSIgd2lkdGg9IjY5LjciIGhlaWdodD0iMjAuOCIvPjwvc3ZnPg==) no-repeat, linear-gradient(225deg, #0900b2, #8a0054, #ff0100, #ffdc00, #04a600, #0900b2, #410083, #b40101);background-size:95% auto, 100% 400%;background-position:center, 0% 0%;border-radius:50%;content:"";animation:slide 60s linear infinite}

        /*--- logo shape animation keyframes ---*/
        @keyframes slide {
            0% {background-position:center, 0% 0%}
            100% {background-position:center, 0% 400%}
        }

        /*--- big text ---*/
        header.site > a b {font-family:'Georgia', serif;font-size:1.67em}

        /*--- registered mark ---*/
        header.site > a sup {font-family:sans-serif;font-size:.5em;vertical-align:top}

        /*--- small text ---*/
        header.site > a span {text-align:center;color:var(--theme-light-color)}


    /*--- main menu ------------------*/
    header.site nav {}
        header.site nav ul {display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
            header.site nav li {}
                header.site nav a {display:block;padding:.5em clamp(.5em, 1.6vw, 1em);font-size:.85em;font-weight:bold;text-transform:lowercase}
                header.site nav a:not(:hover, :focus) {color:var(--theme-light-color)}
                header.site nav a:is(:hover, :focus) {color:var(--theme-bold-color)}

        /*--- instagram icon ---*/
        :is(header.site nav li:last-child, footer.site li:last-child) {}
            :is(header.site nav li:last-child, footer.site li:last-child) a {width:2em;height:1.6em;padding:0;font-size:1em;position:relative;overflow:hidden}
                :is(header.site nav li:last-child, footer.site li:last-child) a::before {display:block;height:200%;content:""}
                :is(header.site nav li:last-child, footer.site li:last-child) a::after {display:block;width:1em;height:1em;background:url('../img/social-icons-sprite.svg') no-repeat -6em center / auto 100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;filter:brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(231%) hue-rotate(227deg) brightness(92%) contrast(86%);content:""}
                :is(header.site nav li:last-child, footer.site li:last-child) a:is(:hover, :focus)::after {filter:brightness(0) saturate(100%) invert(47%) sepia(62%) saturate(6239%) hue-rotate(250deg) brightness(101%) contrast(100%)}

        /*--- line break for 3x2 layout ---*/
        @media (max-width:30em) {
            header.site nav ul::before {flex:100%;order:9;content:""}
                header.site nav li:nth-child(n+4) {order:10;margin-top:-.2em} /*--- nth-child sets break item ---*/
        }









/*--- CONTENT AREA -------------------------------------------*/
main {padding:var(--common-spacing) 0}

    /*--- backgorund gradient ---*/
    main::before {display:block;height:100%;background-image:linear-gradient(var(--theme-deep-color), var(--neutral-black-color));position:absolute;left:0;right:0;z-index:-1;margin-top:calc(0em - var(--common-spacing));content:""}







/*--- FOOTER -------------------------------------------*/
footer.site {padding:1em 0;border-top:.05em solid var(--theme-dark-color)}


    /*--- links ---*/
    footer.site ul {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:0 0 .5em}
        footer.site li {}
            footer.site a {display:block;padding:.5em 1em;font-family:'Georgia', serif;font-size:.85em;font-weight:bold;text-transform:lowercase}
                footer.site a:not(:hover, :focus) {color:var(--theme-light-color)}
                footer.site a:is(:hover, :focus) {color:var(--theme-bold-color)}

    /*--- note ---*/
    footer.site div {font-size:.7em;text-align:center;color:var(--theme-medium-color)}
        footer.site span {display:inline-block}










/*--- HOMEPAGE INTRO -------------------------------------------*/
.introduction {display:grid;grid-template-columns2:repeat(auto-fill, minmax(clamp(100% / (3/*columns*/ + 1) + 0.1%, (27rem/*breakpoint*/ - 100vw) * 1000, 100%), auto));grid-template-columns2:repeat(auto-fill, minmax(clamp(100% / (3/*columns A*/ + 1) + 0.1%, (27rem/*breakpoint*/ - 100vw) * 1000, 100% / (2/*columns A*/ + 1) + 0.1%), 1fr));grid-template-columns:1fr 1fr;gap:1rem clamp(1rem, 3vw, 2rem);margin:0 0 var(--common-spacing)}

    /*--- heading ---*/
    .introduction h1 {grid-column:1/-1;color:var(--theme-secondary-color);margin:0}

    /*--- links/images ---*/
    .introduction :is(a, video) {border-radius:var(--common-radius);border:var(--common-border)}
        .introduction a {overflow:hidden;transition:border-color .2s}
            .introduction a:is(:hover, :focus) {border-color:var(--theme-bold-color)}
            .introduction img {height:100%}
        .introduction video {grid-column:1/-1;max-width:100%;height:auto;width:max(18em, 50%);justify-self:center}


    @media (min-width:40em) {
        .introduction {grid-template-columns:1fr 1fr 1fr}

        /*--- images ---*/
        .introduction video {grid-column:auto;width:100%}
        .introduction a:nth-of-type(2) {order:1}
        /*.introduction #video-player {order:0;grid-column:auto}*/
    }


    /*--- following section heading ---*/
    .introduction + h2 {font-size:1.4em;line-height:1.2;font-weight:bold;color:var(--theme-secondary-color);text-align:center;text-transform:lowercase}
        .introduction + h2  span {display:block}
            .introduction + h2  b {text-transform:capitalize}

    /*--- subtext ---*/
    .introduction + h2 + div {font-family:'Georgia', serif;text-align:center;font-style:italic;font-weight:bold;color:var(--theme-bold-color);font-size:1.2em;margin:0 0 var(--common-spacing)}
        .introduction + h2 + div span {display:inline-block}
        .introduction + h2 + div > span:last-of-type {display:block}
            .introduction + h2 + div > span:last-of-type::before {display:block;color:var(--theme-secondary-color);line-height:1;letter-spacing:.5em;margin:-.2em 0 .2em;content:"..."}








/*--- ITEM LISTING -------------------------------------------*/
.item-grid {display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%/4, max(8em, 100%/6)), 1fr));gap:clamp(.25rem, 1vw, .5rem)}
    .item-grid li {}
        .item-grid a {display:block;padding:100% 0 0;border:.05em solid var(--theme-dark-color);border-radius:var(--common-radius);position:relative;z-index:1;overflow:hidden;transition:border-color .2s}
            .item-grid a:is(:hover, :focus) {border-color:var(--theme-bold-color)}

            /*--- title ---*/
            .item-grid :is(h2, h3) {padding:clamp(.25rem, .75vw, .5rem);background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6) 70%);font-family:sans-serif;font-size:clamp(.6em, 3vw, .85em);line-height:1;letter-spacing:var(--common-letter-spacing);font-weight:normal;text-align:center;color:var(--theme-light-color);font-style:normal;text-shadow:0 0 .1em rgba(0,0,0,.8), 0 0 .2em rgba(0,0,0,.6), 0 0 .5em rgba(0,0,0,.4);position:absolute;bottom:0;left:0;right:0;margin:0;transition:color .2s}
                .item-grid a:is(:hover, :focus) :is(h2, h3) {color:var(--neutral-white-color)}

            /*--- alternate title ---
            .item-grid li:nth-child(n+8) :is(h2, h3) {padding:.25em;background-color:var(--theme-dark-color);background-image:none;text-shadow:none;transition:background-color .2s, color .2s}
                .item-grid li:nth-child(n+8) a:is(:focus, :hover) :is(h2, h3) {background-color:var(--theme-bold-color);color:var(--neutral-white-color)}*/

            /*--- image ---*/
            .item-grid img {object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1}


            /*--- no projects message ---*/
            .item-grid > li:has(> em) {grid-column:1/-1;justify-self:center;padding:.5em;border:.05em solid var(--theme-dark-color);border-radius:var(--common-radius);font-size:.9em;text-align:center;text-transform:lowercase}
                .item-grid > li:has(> em) br {content:""}
                    .item-grid > li:has(> em) br:first-of-type:after {content:" - "}
                    .item-grid > li:has(> em) br:last-of-type:after {content:" "}




/*--- TAGS -------------------------------------------*/
.all-tags {display:grid;grid-template-columns:repeat(auto-fill, minmax(9em, 1fr));gap:1rem;margin:0 0 1rem}
    .all-tags .button-group {justify-content:start;margin:0}

        /*--- group heading ----*/
        .all-tags div {font-family:serif;font-size:.95em;font-weight:bold;color:var(--theme-secondary-color);text-transform:lowercase;margin:0 0 .5rem}


            /*--- active item ---
            .all-tags .button-group .active :is(a, button) {display:flex;align-items:center;gap:.3em}
                .all-tags .button-group .active :is(a, button)::before {height:.6em;width:.6em;background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjU1IiB2aWV3Qm94PSIwIDAgNjAgNTUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYwIDU1IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2ZmZiIgZD0iTTI4LjYgNTQuOWwwIDAuMSAwIDBDMjguNSA1NSAyOC41IDU1IDI4LjUgNTVsLTEuNi0xLjNjLTUuMi00LTIxLjQtMTYuNS0yNi43LTIwLjYgLTEuMi0yLjcgNC0xMCA3LjItOS43IDMgMi40IDExLjYgOS4yIDE4LjQgMTQuNUMzNC4yIDI0LjggNDguNSAyLjggNTAuMiAwLjJjMy4xLTEuMiAxMC4yIDMuMiA5LjggNi40QzU3LjYgMTAuMyAzMC40IDUyLjEgMjguNiA1NC45eiIvPjwvc3ZnPg==) no-repeat center;background-size:100% auto;margin-top:.1em;filter:brightness(0);content:""}*/










/*--- BLOG LISTING ----------------------------------------------*/
.blog-listing {display:grid;grid-template-columns:repeat(auto-fill, minmax(max(16em, min(100%/4)), 1fr));gap:.5em}
    .blog-listing li {}
        .blog-listing a {display:grid;grid-template-columns:4em 1fr;align-items:start;gap:0 .5rem;min-height:calc(100% - 1rem);padding:.5rem;border:var(--common-border);border-radius:var(--common-radius);color:var(--theme-light-color);transition:border-color .2s;position:relative}
            .blog-listing a:is(:hover, :focus) {border-color:var(--theme-bold-color)}

        /*--- image ---*/
        .blog-listing a::before {grid-column:1;grid-row:1/3;display:block;padding:100% 0 0;content:""}
        .blog-listing img {grid-column:1/2;grid-row:1/3;display:block;width:auto;max-height:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}

        /*--- title ---*/
        .blog-listing :is(h2, h3) {font-style:normal;text-transform:lowercase;white-space:nowrap;text-overflow:ellipsis;font-size:1em;line-height:1.3;color:var(--theme-bold-color);overflow:hidden;margin:0}

        /*--- text ---*/
        .blog-listing p {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0}







/*--- EMAIL FORM ---------------------*/
#mc-embedded-subscribe-form {display:flex;flex-wrap:wrap;gap:.5em .25em;max-width:20em;margin:0 0 .5rem}
    #mc-embedded-subscribe-form label {position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%)}
    #mc-embedded-subscribe-form input {flex:10 0 10em}
    #mc-embedded-subscribe-form button {flex:1 0 5em}







/*--- PROJECT PAGE ----------------------------------------------*/
.project {display:grid;gap:var(--common-spacing) clamp(1em, 2vw, 2em)}

    /*--- title group ---*/
    .project header {border-bottom:var(--common-border)}
        .project header .button-group {}

    /*--- gallery ---*/
    .project .image-gallery {}

    /*--- description ---*/
    .project > div:first-of-type {}
        .project > div:first-of-type h2:not(:first-child) {margin-top:2rem}

    /*--- anything after description ---*/
    .project > div:first-of-type ~ * {grid-column:1/-1}

        /*--- video ---*/
        .project :is([id*="video"], [class*="video"]) {}

        /*--- iframe (Instagram) ---*/
        .project iframe {margin:0 auto 2rem !important}


    @media (min-width:50em) {
        .project {grid-template-columns:1fr clamp(15em, 50%, 30em);grid-template-rows:auto 1fr auto}

            /*--- gallery ---*/
            .project .image-gallery {grid-column:2;grid-row:1/3}
    }









/*--- BLOG POST ----------------------------------------------*/
.blog-post {display:grid;gap:var(--common-spacing) clamp(1em, 2vw, 2em);margin:0 0 var(--common-spacing)}

    /*--- title group ---*/
    .blog-post header {text-align:center;border-bottom:var(--common-border)}
        .blog-post header h1:has(+ time) {margin-bottom:.25rem}
        .blog-post header time {display:block;font-size:.75em;font-style:italic;margin:0 0 1rem}
        .blog-post header .button-group {}

    /*--- gallery ---*/
    .blog-post .image-gallery {}

    /*--- description ---*/
    .blog-post > div {}
        .blog-post > div h2:not(:first-child) {margin-top:2rem}
        .blog-post > div :last-child {margin-bottom:0}


    /*--- video ---*/
    .blog-post :is([id*="video"], [class*="video"]) {}


    @media (min-width:50em) {
        .blog-post {grid-template-columns:1fr clamp(15em, 50%, 30em);grid-template-rows:auto 1fr auto}

            /*--- gallery ---*/
            .blog-post .image-gallery {grid-column:2;grid-row:1/3}

            /*--- video ---*/
            .blog-post :is([id*="video"], [class*="video"]) {grid-column:1/-1}
    }


    /*--- following blog listing ---------------*/

        /*--- subheading ---*/
        .blog-post + h2:has(+ .button-group) {text-align:center}