:root {
    --site-border-radius: 0.3rem;
    --pico-border-radius: var(--site-border-radius);
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

.site-header {
    display: flex;
    position: sticky;
    top: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    background: rgb(19 23 31 / 90%);
    /*border-radius: var(--site-border-radius);*/
    z-index: 99;



}
#gallery{
    padding: var(--pico-spacing);
}

.gallery-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    align-items: start;
    gap: 1rem;
}






a {
    text-decoration: none;


}

.container {
    width: min(100% - 2rem, 1400px);
    max-width: 90%;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
}

.site-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem 1rem;

}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
    align-items: center;
    gap: 2rem;
    padding-block: 3rem;
}

.hero h1 {
    max-width: 12ch;
}

.mission-video video {
    height: 100%;
    border-radius: var(--site-border-radius);
    object-fit: contain;
}

.hero img {
    width: 80%;
    object-fit: cover;
    transition-duration: 0.4s;
    filter:
        brightness(0.9)
        contrast(0.9)
        drop-shadow(0.8rem 1rem 1rem rgb(0 0 0 / 0.76))
        drop-shadow(0.6rem -0.35rem 0.85rem rgb(1 170 255 / 22%));
}
.hero img:hover {
    transform: perspective(600px) rotateY(-3deg) rotateX(3deg);
    filter:
            brightness(1)
            contrast(1)
            drop-shadow(0.8rem 1rem 1rem rgb(0 0 0 / 42%))
            drop-shadow(0.6rem -0.35rem 0.85rem rgb(255 1 60 / 0.22));
}

.eyebrow {
    margin-bottom: 0.5rem;
    color: var(--pico-muted-color);
    font-weight: 700;
    text-transform: uppercase;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(90%, 15rem), 1fr));
    /*grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));*/
    gap: 1rem;
    margin-top: 1rem;
}

.card-grid article {
    margin: 0;
    padding: 1.3em;
    border-radius: var(--site-border-radius);
}

.activity-list {
    columns: 2 260px;
}
/*legend{*/
/*    font-size: var(100vh);*/
/*}*/

.info-popover {
    position: relative;
    color: var(--pico-primary);
    text-decoration: underline dotted;
    text-underline-offset: 0.18em;
    cursor: help;
}

.info-popover-content {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    z-index: 10;
    width: min(18rem, 80vw);
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--site-border-radius);
    background: var(--pico-card-background-color);
    box-shadow: var(--pico-box-shadow);
    color: var(--pico-color);
    font-size: 0.85rem;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.25rem);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.info-popover:hover .info-popover-content,
.info-popover:focus .info-popover-content {
    opacity: 1;
    transform: translate(-50%, 0);
}

.media-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3em;
}

.media-grid img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--site-border-radius);
}

.mission-video {
    margin: 0;
}

.launch-gif-preview {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--site-border-radius);
    cursor: pointer;
}

.launch-gif-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.launch-gif {
    opacity: 0;
}

.launch-gif-preview:hover .launch-gif,
.launch-gif-preview:focus .launch-gif {
    opacity: 1;
}

.mission-video figcaption {
    margin-top: 0.5rem;
    text-align: center;
}

.timeline {
    padding-left: 0;
    list-style: none;
}

.timeline li {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.final-cta {
    padding-block: 2rem 3rem;
    text-align: center;
}

.form-page {
    max-width: 90% ;
}

.form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem minmax(12rem, 0.8fr);
    gap: 1rem;
}

.experience-level-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
}

.conditional-field {
    display: block;
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.35rem);
    transition:
        max-height 0.22s ease,
        margin-bottom 0.22s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}

.conditional-field.is-visible {
    max-height: 8rem;
    margin-bottom: var(--pico-spacing);
    opacity: 1;
    transform: translateY(0);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.35rem 1rem;
}

.checkbox-grid label {
    margin-bottom: 0;
}

.form-errors {
    border-color: var(--pico-del-color);
    border-radius: var(--site-border-radius);
}

.privacy-note {
    margin-top: 2rem;
}

.site-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding: 2rem 1rem;
}

.site-footer h2 {
    font-size: 1rem;
}

.site-footer nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.contact-link img {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
}

.contact-link a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.site-footer p {
    margin-bottom: 0.5rem;
}

.site-credit {
    display: block;
    color: var(--pico-muted-color);
}

@media (max-width: 760px) {
    .site-header,
    .hero,
    .gallery-layout {
        grid-template-columns: 1fr;
    }

    .site-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-header nav {
        justify-content: flex-start;
    }

    .form-row,
    .timeline li {
        grid-template-columns: 1fr;
    }
}