/* @view-transition {
  navigation: auto;
} */

@media (prefers-reduced-motion: no-preference) {
  html {
  scroll-behavior: smooth;
  }
}


::selection {
  background-color: var(--sage-deep);
  color: white;
}

:target {
  /* outline: 3px solid red; */
}

:root{
                /* Colors */
                --sage:#8FB09A;         /* logo sage green */
                --sage-deep:#5F8770;
                --rose:#E8C9CE;         /* logo rose */
                --gold:#E8A33D;         /* logo gold */
                --crimson:#841617;      /* institutional crimson */
                --ink:#241F1E;
                --stone:#6B615E;
                --cream:#F7F4EF;
                --cream-2:#EFE9E0;
                --white:#FFFFFF;
                --line:#DED6CB;
                --space-default: 3rem;
                --color-light: white;

                /* Type Scale and Type Related Styles */

                /* @link https://utopia.fyi/type/calculator?c=320,16,1.25,1240,16,1.5,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

                --step--2: clamp(0.70rem, calc(1.08rem + -0.47vw), 0.99rem);
                --step--1: clamp(0.94rem, calc(1.09rem + -0.19vw), 1.05rem);
                --step-0: clamp(1.13rem, calc(1.08rem + 0.21vw), 1.25rem);
                --step-1: clamp(1.20rem, calc(1.05rem + 0.78vw), 1.67rem);
                --step-2: clamp(1.28rem, calc(0.97rem + 1.57vw), 2.22rem);
                --step-3: clamp(1.37rem, calc(0.84rem + 2.66vw), 2.96rem);
                --step-4: clamp(1.46rem, calc(0.63rem + 4.15vw), 3.95rem);
                --step-5: clamp(1.56rem, calc(0.32rem + 6.18vw), 5.26rem);
                --step-6: clamp(1.66rem, calc(-0.12rem + 8.92vw), 7.01rem);
                --step-7: clamp(2rem, calc(-0.12rem + 16vw), 8.00rem);

                --tracking: -0.05ch;
                --tracking-s: -0.075ch;
                --font-base: system-ui, sans-serif;

                /* Space Scale */

                --space-3xs: clamp(0.25rem, calc(0.25rem + 0.00vw), 0.25rem);
                --space-2xs: clamp(0.50rem, calc(0.50rem + 0.00vw), 0.50rem);
                --space-xs: clamp(0.75rem, calc(0.75rem + 0.00vw), 0.75rem);
                --space-s: clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem);
                --space-m: clamp(1.50rem, calc(1.50rem + 0.00vw), 1.50rem);
                --space-l: clamp(2.00rem, calc(2.00rem + 0.00vw), 2.00rem);
                --space-xl: clamp(3.00rem, calc(3.00rem + 0.00vw), 3.00rem);
                --space-2xl: clamp(4.00rem, calc(4.00rem + 0.00vw), 4.00rem);
                --space-3xl: clamp(6.00rem, calc(6.00rem + 0.00vw), 6.00rem);

                /* One-up pairs */
                --space-3xs-2xs: clamp(0.25rem, calc(0.16rem + 0.43vw), 0.50rem);
                --space-2xs-xs: clamp(0.50rem, calc(0.41rem + 0.43vw), 0.75rem);
                --space-xs-s: clamp(0.75rem, calc(0.66rem + 0.43vw), 1.00rem);
                --space-s-m: clamp(1.00rem, calc(0.83rem + 0.87vw), 1.50rem);
                --space-m-l: clamp(1.50rem, calc(1.33rem + 0.87vw), 2.00rem);
                --space-l-xl: clamp(2.00rem, calc(1.65rem + 1.74vw), 3.00rem);
                --space-xl-2xl: clamp(3.00rem, calc(2.65rem + 1.74vw), 4.00rem);
                --space-2xl-3xl: clamp(4.00rem, calc(3.30rem + 3.48vw), 6.00rem);

                /* Custom pairs */
                --space-s-l: clamp(1.00rem, calc(0.65rem + 1.74vw), 2.00rem);
                --space-m-xl: clamp(1.50rem, calc(0.98rem + 2.61vw), 3.00rem);
                --space-l-2xl: clamp(2.00rem, calc(1.30rem + 3.48vw), 4.00rem);

                --shadow-x: 1rem;
                --shadow-y: 1rem;
                --shadow-spread: .5rem;
                --shadow-color: rgba(0,0,0,.03);

                --gutter: var(--space-xs-s);
                --border-radius: .5rem;
                --inner-border-radius: calc(var(--border-radius) / 2);
                --transition-base: 25ms ease-out;
                --transition-movement: 20ms linear;
                --transition-bounce: 50ms cubic-bezier(0.5, 0.05, 0.2, 1.5);

                --box-border: none;

                --anim-default: ease-in-out;
                --anim-default-dur: 25ms;
                
                --measure: 80ch;

                --underline-weight: .0125em;

                /* Type Scale and Type Related Styles */

                /* @link https://utopia.fyi/type/calculator?c=320,16,1.25,1240,16,1.5,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

                --step--2: clamp(0.70rem, calc(1.08rem + -0.47vw), 0.99rem);
                --step--1: clamp(0.94rem, calc(1.09rem + -0.19vw), 1.05rem);
                --step-0: clamp(1.13rem, calc(1.08rem + 0.21vw), 1.25rem);
                --step-1: clamp(1.20rem, calc(1.05rem + 0.78vw), 1.67rem);
                --step-2: clamp(1.28rem, calc(0.97rem + 1.57vw), 2.22rem);
                --step-3: clamp(1.37rem, calc(0.84rem + 2.66vw), 2.96rem);
                --step-4: clamp(1.46rem, calc(0.63rem + 4.15vw), 3.95rem);
                --step-5: clamp(1.56rem, calc(0.32rem + 6.18vw), 5.26rem);
                --step-6: clamp(1.66rem, calc(-0.12rem + 8.92vw), 7.01rem);
                --step-7: clamp(2rem, calc(-0.12rem + 16vw), 8.00rem);

                --tracking: -0.05ch;
                --tracking-s: -0.075ch;
                --font-base: system-ui, sans-serif;

}

        .sr-only, .visually-hidden, .vh {
          border: 0;
          clip: rect(0, 0, 0, 0);
          height: 0;
          padding: 0;
          margin: 0;
          overflow: hidden;
          position: absolute;
          width: 1px;
          white-space: nowrap;
          color:white;
          }

        html, body {margin: 0; font-family: sans-serif; accent-color: #bf202f;}

        main { min-height: 75vh;}

        section {
            margin-block: 0;
        }

        header, section, footer {
           padding-block: var(--space-xl-2xl, 16px);
           padding-inline: var(--space-m-l, 16px);
           display: flex;
           flex-direction: column;
        }

        h1, h2, h3, h4, h5, h6 {
          line-height: 1.25;
        }

        /* Temp */

        h2.sec-title {
          font-size: var(--step-1);
        }

        #contact-block {
          transition: all .25s .125s linear;
          border-radius: var(--inner-border-radius);
          outline: solid 10px black;
          height: fit-content;
          width: fit-content;
        }

        #contact-block h2 {
           transition: all .25s .125s linear;
          text-decoration: underline;
          text-decoration-color: black;
        }

        #contact-block:target {
          outline: solid 10px var(--crimson);
          background-color: var(--crimson);
        }

        #contact-block:target h2 {
          text-decoration-color: white;
          text-decoration-thickness: 2px;
          text-underline-offset: 3px;
        }

        header {
          padding-block: var(--space-xs-s);
          background-color: var(--white);
        }

        footer {
          background-color: black;
          color: white;
          padding-block-end: var(--space-m-l, 16px);
        }

        footer a {
          color: var(--cream);
          text-decoration: none;
          font-size: var(--step--2);
        }

        footer h2, footer h3 {
          margin: 0;
        }

        footer h2 {
          text-transform: uppercase;
          font-size: var(--step--2);
        }

        .footer-note {
          font-size: var(--step--2);
        }

        section div.sec-eyebrow {
          color: #495555;
          text-transform: uppercase;
          font-size: var(--step--2);
          line-height: 1;
        }

        .brand {
          min-width: 138px;
        }



        @media (width > 450px) {
          .brand {
            max-width: 240px;
          }
        }

        @media (width > 500px) {
          .brand {
            max-width: 458px;
          }
        }
/* 
        @media (width < 919px) {
          .brand {
            max-width: 250px;
          }
          section {
            padding-block: var(--space-l-xl);
          }
        } */

       @media (width < 1140px) {
          .brand {
            max-width: 210px;
          }
          section {
            padding-block: var(--space-l-xl);
          }
        }

        #menu-list li:last-of-type {
          margin-inline-end: 0;
        }

        .brand-badge {
          display: block;
          width: 182px;
          height: 66px;
          background-image: url(../img/sacred_logo_textright.png);
          background-repeat: no-repeat;
          background-size: contain;
          margin-block-end: .5rem;
        }

        footer .brand-badge {
          background-image: url(../img/sacred_logo_textright_white.png);
        }

        .brand-sub {font-size: .75em;}

        section#contact {
/*      background: linear-gradient(150deg, var(--sage) 33%, transparent), url(../img/bw_gettyimages-523428486-170667a\(1\).jpg); */
        background-repeat: no-repeat;
        background-position: 100% 33%;
        background-size: cover;
        }

        li.app-com {
          padding-inline-end: 1rem;
          border-bottom-right-radius: var(--border-radius);
          border-width: 0 3px 3px  0;
          stroke-linecap: round;
          /* margin-block-end: 1rem; */
        }
    

        li.app-com h3 {
          margin-block-start: 0;
        }

        button {
          font-size: 16px;
          font-family: sans-serif;
        }

        #menu-button:hover {
          cursor: pointer;
          font-weight: 400;
        }

        #menu-button:active {
          transition-duration: .075s;
          background-color: #214339;
        }


        /* Typography */

        body {font-size: 16px; line-height: 1.5; font-family: var(--font-base);}
        h1, h2, h3, h4, h5, h6 { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', Arial, sans-serif; }
        p {font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}

        h4.nih-number {
          font-weight: 200;
          color: #444;
        }

        .word-break-wrapper {
          word-break: keep-all;
        }

        .white-text {
          color: white;
        }

        /* Site Navigation */

        /* .nav-links {
          /* display:flex;
          flex-direction: row;
          justify-content: end;
        } */

        #menu-list {
          margin-left: auto;
          --gutter: 0;
        }

        .nav-links ul a {
          text-decoration-skip-ink: all;
          text-underline-offset: 3px;
          text-decoration-color: white;
          text-decoration-thickness: 2px;
          color: #54786c;
          padding: 8px 2px;
          transition: all .125s linear;
        }

        .nav-links ul a:hover, .nav-links ul a:focus-within {
          text-decoration-color: #d7dedb;
          color: #32564a;
        } 

        .nav-links ul a:active, .nav-links ul a.current-page  {
          text-decoration: underline;
          text-decoration-thickness: 2px;
          text-underline-offset: 3px;
          color: #32564a;
          text-decoration-color: #32564a;
        }

        .nav-links a:focus {
          text-decoration: initial;
        }

        .nav-links a.page-link {
          text-decoration: none;
          font-weight: 600;
        }

        /* Utility */

        .hero {
          border-bottom: solid 1px hsl(from var(--sage) h s l / .33);
          background: url(/assets/img/SACRED/bg_collage_color_hero.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          background-position-y: 0%;
          background-color: var(--cream); 
        }

        #about {
          background-color: var(--sage-deep);
          background: url(/assets/img/SACRED/bg_who-we-are.jpg) no-repeat 100% 100%, linear-gradient(to bottom, transparent, var(--sage));
          background-blend-mode:soft-light;
          background-size: cover;
          background-position-y: 0%;
        }

        #programs-block {
          background: url(/assets/img/SACRED/bg_programs_and_research.jpg), linear-gradient(to right, var(--rose), var(--crimson));
          background-repeat: no-repeat;
          background-blend-mode: screen;
          background-size: cover;
          background-position-y: 100%;
        }

        #domains {
          background: url('/assets/img/SACRED/bg_domains.jpg'), linear-gradient(to right, var(--cream), var(--gold));
          background-blend-mode: luminosity;
          background-position-y: 100%;
        }

        #domains-page {
          background-color: var(--gold, #E8A33D);
          background: url(/assets/img/SACRED/bg_domains.jpg) no-repeat 100% 100%, linear-gradient(to bottom, white, var(--gold));
          background-blend-mode:luminosity; 
          background-size: cover;
          background-position-y: 0%;
        }

        #research {
          background-color: var(--sage-deep); background: url(/assets/img/SACRED/thumb_21.08.05.Omak.FC.jpg) no-repeat 100% 100%, linear-gradient(to bottom, transparent, var(--rose));
          background-blend-mode:soft-light;
          background-size: cover;
        }

        @media (width < 1140px) {
        ul.breadcrumbs {
          padding-inline: var(--space-m-l, 16px);
        } 
        }

        .breadcrumbs a {
          color: #43675b;
        }

        .breadcrumbs a.current-page {
          color: #5c5d5d;
          max-width: 15ch;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .breadcrumbs-visible {
          margin-block-start: 0;
          padding-block-start: 0;
        }

        .round {
          border-radius: var(--border-radius);
        }

        .inner {
          display: block;
          text-align: left;
          width: 100%;
          max-width: 1080px;
          margin: auto;
        }

        .eyebrow, .sec-eyebrow, div.tag {color: #333333; font-size: var(--step--2); line-height: 1.125;}
        
        .tag {color: #999;}
        .no-bullets { list-style: none; padding-left: 0; }
        .btn {padding: var(--space-3xs-2xs) var(--space-xs); display: inline-block; background-color: var(--crimson); color: white; text-decoration:  none; border-radius: var(--border-radius); border: none; transition: all .125s linear;}
        .btn-ghost { background-color: white; color: #333;}
        a.btn {color:white; padding-inline: var(--space-xs); font-weight: 600;}
        a.btn-ghost { background-color: white; color: #333;}
        
        a.btn + a.btn {
          margin-block-start: .5rem;
        }

        a.btn:hover, a.btn:focus-within {
          background-color: #91191b;
        }

        a.btn-ghost:hover, a.btn-ghost:focus-within {
          background-color: #eeeeee; 
        }

        .round { border-radius: var(--border-radius); }

        .domains .domain h3, .who-block h3 {
          margin-block-start: 0;
        }
        
        .domains .domain p {
          margin-block-end: 0;
        }

        .team {
          padding-block: var(--space-m-l);
        }

        .member {
          max-width: 260px;
          text-decoration: none;
          border-radius: var(--border-radius);
          align-self: stretch;
        }

        .member h3, .member p {
          margin-block: 0;
        }

        .member img {
          max-width: 100%;
          height: auto;
          object-fit: cover;
          border-radius: var(--inner-border-radius);
        }

        .drop-shadow {
          filter: drop-shadow(10px 10px 10px #00000022);
          -webkit-filter: drop-shadow(10px 10px 10px #00000022);
          transform: translateZ(0);
        }

        .extra-vert-space {margin-block: var(--space-l-xl);}

        /* Layout Primitives */

            .box {
                padding: var(--space-s);
                border: var(--box-border) solid;
                color: var(--color-dark);
                background-color: var(--color-light);
                outline: 0.125rem solid transparent;
                outline-offset: -0.125rem;
          /* filter: drop-shadow(4px 4px 4px rgba(0,0,0,.125)); */
          
            }

            .box * {
                color: inherit;
            }

            .box.invert {
                color: var(--color-light);
                background-color: var(--color-dark);
            }

            .center {
                box-sizing: content-box;
                margin-inline: auto;
                max-inline-size: var(--measure);
                display:flex;
                flex-direction: column;
                align-items: center;
              }

            .cluster {
            display: flex;
            flex-wrap: wrap;
            gap: var(--gutter, var(--space-s, 1rem));
            justify-content: var(--cluster-horizontal-alignment, flex-start);
            align-items: var(--cluster-vertical-alignment, center);
            }

            .grid.program-grid {
              grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
              /* display: grid-lanes; */
            }

            .program {
              /* max-width: clamp(320px, 498px, 50%); */
              /* align-self: flex-start; */
              align-self: flex-start;
            }

            /* Reel */

            .reel {
                display: flex;
                block-size: auto;
                overflow-x: auto;
                overflow-y: hidden;
                scrollbar-color: var(--cream) var(--cream-2);
                
                scroll-snap-type: inline mandatory;
              
                & > * {
                  scroll-snap-align: center;
                }

              }
              
              .reel::-webkit-scrollbar {
                block-size: 1rem;
              }
              
              .reel::-webkit-scrollbar-track {
                background-color: var(--cream-2);
              }
              
              .reel::-webkit-scrollbar-thumb {
                background-color: var(--cream-2);
                background-image: linear-gradient(var(--cream-2) 0, var(--cream-2) 0.25rem, var(--cream-2).25rem, var(--cream-2).75rem, var(--cream-2) 0.75rem);
              }
              
              .reel > * {
                flex: 0 0 auto;
              }
              
              
              .reel > img {
                block-size: 100%;
                flex-basis: auto;
                width: auto;
              }
              
              .reel > * + * {
                margin-inline-start: 1rem;
              }
              
              .reel.overflowing {
                padding-block-end: 1rem;
              }

            /* Sidebar */

            .with-sidebar {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-s-l);
            }

            .with-sidebar > :first-child {
                flex-grow: 1;
            }

            .with-sidebar > :last-child {
                flex-basis: 0;
                flex-grow: 999;
                min-inline-size: 50%;
            }

            .with-sidebar-right {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-s-l);
            }

            .with-sidebar-right > :last-child {
                flex-basis: 33%;
                flex-grow: 1;
            }

            .with-sidebar-right > :first-child {
                flex-basis: 0;
                flex-grow: 999;
                min-inline-size: 33%;
            }
                        
            .sidebar {
              /* ↓ The width when the sidebar _is_ a sidebar */
              flex-basis: 21rem;
              flex-grow: 1;
            }

            .not-sidebar {
              /* ↓ Grow from nothing */
              flex-basis: 0;
              flex-grow: 999;
              /* ↓ Wrap when the elements are of equal width */
              min-inline-size: 50%;
            }


            /* Stack */

            .stack {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }

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

            .stack > * + * {
                margin-block-start: var(--space-xl, 1.5rem);
            }

            .stack > p + p {
                margin-block-start: var(--space-s, 1rem);
            }

            /* Switcher */

            .switcher {
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
                }

            .switcher > * {
            flex-grow: 1;
            flex-basis: calc(( 30rem - 100%) * 999);
            }

            .switcher > :nth-last-child(n+ 5),
            .switcher > :nth-last-child(n+ 5) ~ * {
            flex-basis: 100%;
            }

            /* Cover */

            .cover {
            display: flex;
            flex-direction: column;
            min-block-size: 100vh;
            padding: 1rem;
            }

            .cover > * {
            margin-block: 1rem;
            }

            .cover > :first-child:not(h1) {
            margin-block-start: 0;
            }

            .cover > :last-child:not(h1) {
            margin-block-end: 0;
            }

            .cover > h1 {
            margin-block: auto;
            }

            /* Frame */

            .frame {
                --n: 16;
                --d: 9;
                aspect-ratio: var(--n) / var(--d);
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
              }
              
              .frame > img,
              .frame > video {
                inline-size: 100%;
                block-size: 100%;
                object-fit: cover;
              }

            /* Imposters - Absolute and Fixed */

              .imposter-abs {
                position: absolute;
                inset-block-start: 50%;
                inset-inline-start: 50%;
                transform: translate(-50%, -50%);
              }
              
              .imposter-abs.contain {
                --margin: 0px;
                overflow: auto;
                max-inline-size: calc(100% - (var(--margin) * 2));
                max-block-size: calc(100% - (var(--margin) * 2));
              }
                
              .imposter-fxd {
                position: fixed;
                inset-block-start: 50%;
                inset-inline-start: 50%;
                transform: translate(-50%, -50%);
              }
              
              .imposter-fxd.contain {
                --margin: 0px;
                overflow: auto;
                max-inline-size: calc(100% - (var(--margin) * 2));
                max-block-size: calc(100% - (var(--margin) * 2));
              }

            /* Icon */
            
            .icon {
                width: 0.75em;
                width: 1cap;
                height: 0.75em;
                height: 1cap;
              }
              
              .with-icon {
                display: inline-flex;
                align-items: baseline;
              }
              
              .with-icon .icon {
                margin-inline-end: 1rem;
              }

              /**********

              Example usage:
                <span class="with-icon">
                <svg class="icon">
                    <use href="/path/to/icons.svg#my-icon"></use>
                </svg>
                Close
                </span>

              **********/

            .card {
                display: flex;
                flex-direction: column;
                gap: 1rem 0;
                padding: var(--space-s-m);
                border: none;
                justify-items: center;
            }

            .grid {
                display: grid;
                grid-gap: 1rem;
              }
              
              @supports (width: min(250px, 100%)) {
                .grid {
                  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
                }
              }

            /* / END of Primitives */

      .back-to-top-link { 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed; 
        aspect-ratio: 1 / 1;
        right: 1rem; 
        bottom: 1rem;
        background-color: #43655b;
        /* outline: solid 2px #cdcdcd99; */
        text-decoration: none;
        width: 8ch;
        height: 8ch;
        font-size: var(--step--1);
        text-align: center;
        font-weight: 300;
        border-radius: 50%;
        transition: all 200ms;
        color: var(--rose);
        font-weight: 600;
        outline: solid 0 transparent;
        visibility: hidden;
        opacity: 0;
        transform-origin: 50% 50%;
        line-height: 1;
    }

    .back-to-top-link:visited { color: var(--rose); }

    .back-to-top-link[data-visible = true] {
        opacity: 1;
        visibility: visible;
    }

    .back-to-top-link:hover, .back-to-top-link:focus {
        background-color: var(--sage-deep);
        color: white;
        background-blend-mode: screen;
        /* outline: solid 2px var(--color-accent); */
    }

    .back-to-top-link:hover i {
        display: inline-block;
        transform: translateY(-3px);
    }

          .skip-link:focus {
          overflow: auto;
          clip: unset;
          width: min-content;
          height: auto;
          padding: var(--space-m);
          display: block;
          position: absolute;
          top:0; 
          left: 1rem;
          background-color: #000000;
          color: white;
          z-index: 10;
      }

      .back-to-top-link > a {
        display: block;
        width: 5ch;
        font-size: var(--step--1);
      }