:root {
    --story-blue-dark: #10222b;
    --story-blue:#28404D;
    --story-blue-light:#486876;
    --story-light-blue: #6EBDDA;
    --story-orange: #E26440;
    --story-orange-light: #EEC1B4;
    --story-green-dark: #062a1d;
    --story-green: #234d3d;
    --story-green-light: #2a5b49;
}

.footer--utils-lightdark,
.global-menu--utils-lightdark { display:none; }
.bg--full-bleed:before { background: inherit; background-blend-mode: inherit; background-attachment: inherit; }
/* Full-width sections already reach the screen edge; skip the gutter offset that overshoots it. */
.section--full-width.bg--full-bleed:before { left: 0; right: 0; }
.section--full-width { margin-block: 0; }
body { color-scheme:light; }
.section a { color: var(--story-orange); }
.section.bg--story-green a { color: var(--story-orange-light); }
h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-heading); }
p ~ .content-heading { margin-block-start: clamp(3rem, 4vw, 6rem); }
.content-heading { font-size: clamp(2rem, 4vw, 3.5rem); }
.site-content { --content-padding: 0; }

.page--longform {
    .section {
        &.page-footer { margin-inline: auto; margin-block-start: 0; }
    }
}

.page-title { font-family: var(--font-default); font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
    em { font-family: var(--font-heading); font-size: clamp(5rem, 5vw + 1rem, 7rem); display: block; }
}

.outlined-avatar { margin-block-end: 3rem;
    .avatar { position: relative; border: 8px solid var(--story-light-blue); border-radius: 50%; clip-path: circle(50% at 50% 50%); box-sizing: border-box; overflow: clip; background-color: var(--story-blue);
        svg { position: absolute; width: 100%; aspect-ratio: 1; z-index: 2; top: 0; left: 0; }
    }
}

.photo-group { margin-block: clamp(10rem, 10vw, 15rem); }
.page-header[class*=bg--] { margin-block-end: 0; }

blockquote {
    border: 3px solid var(--story-orange); border-width: 4px 0;
    p { margin-block: 2rem; }
}

.masked {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  mask-mode: alpha;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* Hold the photo back until story.js applies the grid mask (JS-only). */
@media (scripting: enabled) {
  .masked { mask-image: linear-gradient(#0000, #0000); }
}

@media only screen {

    .bg--story-blue {
        background: url('./images/bg-solar_cell.svg') center top / 100px auto repeat, linear-gradient(35deg, var(--story-blue-dark) 0%, var(--story-blue) 50%, var(--story-blue-light) 100%); background-blend-mode: overlay; background-attachment: fixed;
        p, h2 { color: white; }
        .caption, figcaption { color: var(--gray-extra-light); }
    }
    .bg--story-green {
        background: url('./images/bg-solar_cell.svg') center top / 100px auto repeat, linear-gradient(35deg, var(--story-green-dark) 0%, var(--story-green) 50%, var(--story-green-light) 100%); background-blend-mode: overlay; background-attachment: fixed;
        p, h2 { color: white; }
        .caption, figcaption { color: var(--gray-extra-light); }
    }
    .bg--white {
        background: white;
        p { color: var(--gray); }
    }

    .section--full-width {
        padding-inline: var(--gutter-width);
    }

}

@media only screen and (min-width: 48em) {

    /* Photo grid groupings */
    .photo-group {
        &.photo-group--crossroads-assembly { --grid-gap: 2rem; grid-template-rows: 1fr 1fr; grid-gap: var(--grid-gap);
            img { object-fit: contain; }
            img:nth-child(1) { grid-row: 1 / 3; }
            img:nth-child(2) { margin-block-start: var(--grid-gap); margin-inline-start: var(--grid-gap); grid-row: 1; }
            img:nth-child(3) { margin-inline-start: calc(var(--grid-gap) * -3); grid-row: 2; margin-block-start: var(--grid-gap); }
        }
        &.photo-group--ili-boardroom { --grid-gap: 2rem; grid-gap: var(--grid-gap);
            div { 
                img { object-fit: cover; }
                &:nth-child(1) { grid-row: 1; z-index: -1; aspect-ratio: 8 / 5.33; }
                &:nth-child(2) { grid-row: 1 / 3; z-index: 0; aspect-ratio: 5.33 / 8; }
                &:nth-child(3) { margin-inline-end: calc(var(--grid-gap) * -3); z-index: 1; object-fit: contain; width: 80%; aspect-ratio: 8 / 5.33; }
                &:nth-child(4) { grid-row: 3 / 4; grid-column: 3 / 5; margin-block-start: -25%; margin-inline-start: calc(var(--grid-gap) * -1); z-index: 1; object-fit: contain; width: 100%; aspect-ratio: 8 / 5.33; }
            }
        }
        &.photo-group--regan-tour { --grid-gap: 2rem; grid-template-rows: 1fr auto; grid-gap: var(--grid-gap);
            div { 
                img { object-fit: cover; }
                &:nth-child(1) { z-index: -1; aspect-ratio: 8 / 5.33; }
                &:nth-child(2) { z-index: 0; aspect-ratio: 5.33 / 8; }
            }
        }
        &.photo-group--bianca { --grid-gap: 2rem; grid-gap: var(--grid-gap);
            div { 
                img { object-fit: cover; }
                &:nth-child(1) { z-index: -1; }
                &:nth-child(2) { z-index: 0; aspect-ratio: 5.33 / 8; }
                &:nth-child(3) { z-index: 2; aspect-ratio: 8 / 5.33; }
                &:nth-child(4) { z-index: 1; aspect-ratio: 8 / 5.33; }
            }
        }
        &.photo-group--whalen-duffy { --grid-gap: 2rem; grid-gap: var(--grid-gap);
            div { 
                img { object-fit: cover; }
                &:nth-child(1) { z-index: 0; aspect-ratio: 8 / 5.33; }
                &:nth-child(2) { z-index: -1; aspect-ratio: 8 / 5.33; }
            }
        }
    }
}

@media only screen and (min-width: 60em) {
    .image-right { margin-inline-end: calc(var(--gutter-width) * -1); }

    .page-header--screen { margin-block-end: 0;
        
        &.bg--dark { background-color: transparent; }
        .page-image { 
            /*max-height: 100vh;*/
            overflow: visible;
            aspect-ratio: 3 / 2;
            img, svg {
                object-position: center top;
                max-height: unset;
                width: 100%;
                height: auto;
            }
        }
    }

    /* Photo grid groupings */
    .photo-group { 
        &.photo-group--crossroads-assembly { --grid-gap: 2rem; grid-template-rows: 1fr 1fr; grid-gap: var(--grid-gap);
            img { object-fit: contain; }
            img:nth-child(1) { grid-row: 1 / 3; }
            img:nth-child(2) { margin-block-start: var(--grid-gap); margin-inline-start: var(--grid-gap); grid-row: 1; }
            img:nth-child(3) { margin-inline-start: calc(var(--grid-gap) * -3); grid-row: 2; margin-block-start: var(--grid-gap); }
        }
        &.photo-group--ili-boardroom { --grid-gap: 4rem; grid-gap: var(--grid-gap);
            div { 
                img { object-fit: cover; }
                &:nth-child(1) { grid-row: 1; z-index: -1; aspect-ratio: 8 / 5.33; margin-inline-end: calc(var(--grid-gap) * -3); }
                &:nth-child(2) { grid-row: 1 / 3; z-index: 0; aspect-ratio: 5.33 / 8; height: 70%; align-self: start; margin-block-start: 10%; }
                &:nth-child(3) { margin-inline-end: calc(var(--grid-gap) * -2); z-index: 1; object-fit: contain; width: 80%; aspect-ratio: 8 / 5.33; align-self: start; justify-self: end; }
            }
        }
        &.photo-group--regan-tour { --grid-gap: 2rem; grid-gap: var(--grid-gap); grid-template-rows: 1fr;
            div { 
                img { object-fit: cover; }
                &:nth-child(1) { z-index: -1; aspect-ratio: 8 / 5.33; margin-inline-end: -40%; }
                &:nth-child(2) { z-index: 0; aspect-ratio: 8 / 5.33; margin-top: 80%; }
            }
        }
        &.photo-group--bianca { --grid-gap: 2rem; grid-gap: var(--grid-gap);
            div { 
                img { object-fit: cover; }
                &:nth-child(1) { margin-inline-end: calc(var(--grid-gap) * -3); margin-block-start: 4rem;  z-index: -1; aspect-ratio: 1; }
                &:nth-child(2) { z-index: 0; aspect-ratio: 5.33 / 8; width: 75%; margin-inline-start: calc(var(--grid-gap) * 3); }
                &:nth-child(3) { z-index: 2; aspect-ratio: 8 / 5.33; width: 80%; justify-self: end; margin-inline-end: -5%; margin-block-start: 5%; }
                &:nth-child(4) { z-index: 1; aspect-ratio: 8 / 5.33; width: 120%; margin-inline-start: -10%; margin-block-start: -10%; }
            }
        }
        &.photo-group--whalen-duffy { --grid-gap: 2rem; grid-gap: var(--grid-gap);
            div { 
                img { object-fit: cover; }
                &:nth-child(1) { z-index: 0; aspect-ratio: 8 / 5.33; margin-block-start: 50%; margin-inline-end: calc(var(--grid-gap) * -1); }
                &:nth-child(2) { z-index: -1; aspect-ratio: 8 / 5.33; margin-inline-start: calc(var(--grid-gap) * -1); }
            }
        }
    }
}

@media only screen and (min-width: 80em) {
    .orbs {
        span:nth-child(1) {
            &:before { transform: translateY(var(--drift-before, 0px)); content: ""; width: 4.2vw; height: auto; aspect-ratio: 1; border-radius: 50%; background-color: var(--story-orange); left: 15%; top: 30%; position: absolute; z-index: 3; }
            &:after { transform: translateY(var(--drift-after, 0px)); content: ""; width: 3vw; height: auto; aspect-ratio: 1; border-radius: 50%; background-color: var(--story-light-blue); left: 90%; top: 22%; position: absolute; z-index: 3; }
        }
        span:nth-child(2) {
            &:before { transform: translateY(var(--drift-before, 0px)); content: ""; width: 3.5vw; height: auto; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--story-light-blue); left: 8%; top: 15%; position: absolute; z-index: 3; }
            &:after { transform: translateY(var(--drift-after, 0px)); content: ""; width: 2.5vw; height: auto; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--story-orange); left: 85%; top: 40%; position: absolute; z-index: 3; }
        }
    }
    .story-icon {
        &:before { content: ""; --icon-size: 8vw; width: var(--icon-size); height: auto; display: block; position: absolute; } 
        &.icon--sunrise:before { background: url('./images/icon-sunrise.svg') center center / contain no-repeat; aspect-ratio: 1; }
        &.icon--illinois:before { background: url('./images/icon-illinois.svg') center center / contain no-repeat; aspect-ratio: 1; }
        &.icon--nd:before { background: url('./images/icon-group-dome.svg') center center / contain no-repeat; aspect-ratio: 166 / 727; }
        &.icon--solar-panel:before { background: url('./images/icon-group-solar-panel.svg') center center / contain no-repeat; aspect-ratio: 238 / 850; }
        &.icon--prison:before { background: url('./images/icon-group-prison.svg') center center / contain no-repeat; aspect-ratio: 288 / 800; }
        &.icon--left:before { left: 2%; }
        &.icon--right:before { right: 2%; }
    }
}

@media only screen and (min-width: 90em) {
    .page-header--screen:has(.page-image) .page-title-wrapper {
        grid-column: 5 / span 6;
        text-align: center;
        align-self: center;
        padding-block-start: 0;
        margin-block-start: -48%;
    }

    .story-icon {
        &:before { content: ""; --icon-size: 8vw; } 
        &.icon--left:before { left: 7.5%; }
        &.icon--right:before { right: 7.5%; }
    }

    .bg--gradient:before { display: none; }
    .video-link .dialog-link { margin-inline: auto; }
}

@media only screen and (min-width: 100em) {
    .page-header[class*=bg--] {
        margin-block-end:0
    }
}

/* Photo group scrub: each photo drifts vertically at its own pace as it crosses the viewport (same technique as fighting-to-prevent-infections) */
@media only screen and (min-width: 48em) and (prefers-reduced-motion: no-preference) {
    @keyframes scrub-up-slow    { from { transform: translateY(3rem); }  to { transform: translateY(-3rem); } }
    @keyframes scrub-up-medium  { from { transform: translateY(6rem); }  to { transform: translateY(-6rem); } }
    @keyframes scrub-up-fast    { from { transform: translateY(10rem); } to { transform: translateY(-10rem); } }
    @keyframes scrub-down-slow  { from { transform: translateY(-3rem); } to { transform: translateY(3rem); } }
    @keyframes scrub-down-medium{ from { transform: translateY(-6rem); } to { transform: translateY(6rem); } }

    @supports (animation-timeline: view()) {
        .photo-group > * {
            animation-timeline: view();
            animation-range: cover;
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-duration: 1ms; /* required for scroll-driven animations in some engines */
            animation-name: scrub-up-medium;
        }
        .photo-group > :nth-child(2) { animation-name: scrub-down-medium; }
        .photo-group > :nth-child(3) { animation-name: scrub-up-slow; }
        .photo-group > :nth-child(4) { animation-name: scrub-down-fast; }
    }
}