body {
    --projectMaxWidth: 1000px;
    --articleMaxWidth: 800px;
    --contentMaxWidth: 600px;
    --mediaMaxHeight: 70vh;
    --heroshotMaxHeight: 60vh;
}
body.default { --projectMaxWidth: unset; }
body.mediaSize { --projectMaxWidth: 1400px; --articleMaxWidth: 1200px; --mediaMaxHeight: 85vh}
body.paragraphWidth { --contentMaxWidth: 800px; }
/* Control Panel */
.controlPanelButtonContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: var(--unit);

    display: flex;
    justify-content: center;
    align-items: end;

    pointer-events: none;
    z-index: 1;
}

/* Layout */
.projectStandaloneHeader {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    padding: var(--unitTiny) 0;
    
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--accent);
    box-shadow: var(--boxShadowLight);

    z-index: 1;
}
.projectStandaloneHeader p {
    font-size: var(--typeBody);
    font-stretch: 90%;
    text-transform: uppercase;
    text-wrap: nowrap;
    color: var(--backgroundPrimary);
}
.projectStandaloneHeader a { color: var(--backgroundPrimary); font-stretch: 100%; }
.projectStandaloneHeader a:hover { color: var(--backgroundSecondary); }
.projectStandaloneHeader a:active { color: var(--backgroundTertiary); }
.projectContainer {
    width: 100%;
    height: 100%;
    max-width: var(--projectMaxWidth);

    display: flex;
    flex-flow: column;
    align-items: center;

    overflow-x: hidden;
    overflow-y: scroll; 
    
    margin-left: auto; margin-right: auto;
}
body.project .projectContainer {
    overflow: visible;
    min-height: 100vh;
}
.projectArticle {
    width: 100%;
    max-width: var(--articleMaxWidth);
    padding-top: var(--unitLarge);
}
.projectDivider {
    height: var(--strokeWidth);
    margin-block: var(--unitLarge);
}
.projectDivider:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--accent);
}
/* Project Heroshot */
.projectHeroshot {
    width: 100%;
    height: auto;
    max-height: var(--heroshotMaxHeight);
    
    border-style: solid;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: var(--strokeWidth);
    
    aspect-ratio: 2 / 1;
    object-fit: cover;
}
body.themeLight .projectHeroshot { background-color: #fff;}
body.themeDark .projectHeroshot { background-color: #000;}
body.themeContrast .projectHeroshot { background-color: #000;}
@media (min-width: 1000px) {
    body.project:not(.mediaSize) .projectHeroshot {
        border: none;
        box-shadow: var(--boxShadowLight);
        border-radius: 0 0 var(--unit) var(--unit);
    }
}
@media (min-width: 1400px) {
    body.project.mediaSize .projectHeroshot {
        border: none;
        box-shadow: var(--boxShadowLight);
        border-radius: 0 0 var(--unit) var(--unit);
    }
}

/* Project Header */
.projectHeader {
    width: 100%;
    height: auto;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.projectHeaderTitlesContainer {
    width: auto;
    min-width: 30%;
    max-width: 60%;
    height: auto;
    
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: start;
    gap: var(--unitSmall);

    text-wrap: balance;
}
.projectHeaderInfoContainer {
    position: relative;

    width: auto;
    min-width: 40%;
    max-width: 80%;
    height: 100%;
    padding-top: var(--unitSmall);

    display: flex;

    justify-content: end;
}
.projectHeaderInfo {
    width: 100%;
    height: 100%;

    display: flex;
    flex-flow: row wrap;
    justify-content: end;
    gap: var(--unitSmall);
}
.projectHeaderInfoTextContainer {
    width: fit-content;
    height: auto;
    padding: var(--unitSmall) var(--unit);
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--backgroundSecondary);
    border-radius: var(--unitSmall);
}
.projectHeaderInfoText {
    font-size: var(--typeBodySmall);
    text-align: center;
    line-height: 1;
}
body.themeContrast .projectHeaderInfoTextContainer { background-color: var(--foregroundPrimary); }
body.themeContrast .projectHeaderInfoText { color: var(--backgroundPrimary); }

/* Project content */
.projectContent {
    text-align: justify;
    hyphens: auto;
}
.projectContent > *:last-child { margin-block-end: 0; }
.projectContent > p,
.projectContent > h1,
.projectContent > h2 {
    margin-left: auto; margin-right: auto;
    padding-left: var(--unitLarge);
    padding-right: var(--unitLarge);
}
.projectContent > p { margin-block: var(--unit); }
.projectContent > h1, .projectContent > h2 { margin-block-start: var(--unitLarge); margin-block-end: var(--unit); }

.projectContentMediaContainer {
    width: 100%;
    height: auto;
    margin-block: var(--unitLarge);
    padding-left: var(--unitLarge);
    padding-right: var(--unitLarge);
}
.projectContentMediaContainer > * { margin-block: var(--unitLarge); }
/* .projectContentMediaContainer > *:first-child { margin-block-start: 0; } */
/* .projectContentMediaContainer > *:last-child { margin-block-end: 0; } */
/* .projectContentMediaContainer:has(.projectCarouselContainer) { padding-left: 0; padding-right: 0; } */

.projectContentImage,
.projectContentVideo,
.projectContentModel {
    width: auto;
    height: auto;
    display: block;
    max-width: 100%;
    max-height: var(--mediaMaxHeight);
    margin-left: auto; margin-right: auto;

    background-color: var(--backgroundSecondary);
    border-radius: var(--unitSmall);
    border: var(--outlineContrast);
    filter: var(--dropShadowLight);
    
    object-fit: contain;
}

.projectContentModel { width: 100%; height: 540px; max-width: 1280px; max-height: 720px; }
body.themeLight .projectContentModel { background: linear-gradient(to top, var(--backgroundTertiary) 0%, var(--backgroundPrimary) 100%); }
body.themeDark .projectContentModel { background: linear-gradient(to top, var(--backgroundSecondary) 0%, var(--backgroundQuinary) 100%); }

.projectCarouselContainer {
    position: relative;
    width: 100%;
    margin-block: var(--unitLarge);
}
.projectCarousel {
    position: relative;
    width: 100%;
    margin-block: var(--unitLarge);
    padding: var(--unit) var(--unitLarge);

    display: flex;
    justify-content: start;
    align-items: center;
    flex-flow: row nowrap;
    gap: var(--unit);

    border-radius: var(--unit);
    background-color: var(--backgroundSecondary);
    outline: var(--outlineContrast2);
    filter: var(--dropShadowLight);
    
    overflow-x: scroll;
    overflow-y: hidden;
}
body.default .projectCarousel {
    width: calc(100% - var(--unitLarge) * 2);
    margin-left: var(--unitLarge);
    margin-right: var(--unitLarge);
}
@media (max-width: 800px) {
    .projectCarousel {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: unset;
    }
}
@media (max-width: 1200px) { body.mediaSize .projectCarousel { border-radius: unset; } }

.projectCarousel,
.projectContainer {
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color: var(--accent) transparent;
}
.projectCarouselButtons {
    width: 100%;
    margin-block: var(--unitLarge);
    margin-left: auto; margin-right: auto;
    padding: 0 var(--unitLarge);

    display: flex;
    justify-content: space-between;
    align-items: start;
}

.projectCarouselButton.next { grid-area: a }
.projectCarouselButtonsCaption { grid-area: b }
.projectCarouselButton.previous { grid-area: c }

.projectCarouselButton {
    min-width: var(--buttonSizeLarge);
    min-height: var(--buttonSizeLarge);
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--backgroundPrimary);
    border: solid var(--strokeWidth) var(--backgroundTertiary);
    border-radius: var(--unitSmall);

    cursor: pointer;
}
body.themeContrast .projectCarouselButton { border: solid var(--strokeWidth) var(--accent); }
.projectCarouselButton:hover { background-color: var(--backgroundSecondary); }
.projectCarouselButton:active { background-color: var(--backgroundTertiary); }

.projectContent > p,
.projectContent > h1,
.projectContent > h2,
.projectContentMediaContainer > p,
.projectContentMediaContainer > h1,
.projectContentMediaContainer > h2,
.projectCarouselButtons > p,
.projectCarouselButtonsCaption,
.projectHeader,
.projectFooter,
.projectDivider {
    width: 100%;
    max-width: var(--contentMaxWidth);
    margin-left: auto; margin-right: auto;
    padding-left: var(--unitLarge); padding-right: var(--unitLarge);
}

.projectCarouselButtonsCaption .projectDivider { padding-left: 0; padding-right: 0; margin-block-end: 0; }

.projectFooter { margin-block: var(--unitLarge); }
.projectFooterIconsContainer {
    display: flex;
    flex-flow: row wrap;
    gap: var(--unitSmall);
    
    overflow: hidden;
    margin-block: var(--unit);
}
.projectFooterIcon { width: var(--typeHeading); }

.projectBannerContainer {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 1;
}
.projectBanner {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: var(--bannerImage);
    background-repeat: no-repeat;
    mask-size: cover;
    mask-position: center top;
}

.projectBannerContainer { aspect-ratio: 2 / 1; }
.projectBanner { background-size: cover; background-position: center top; mask-image: url("/projects/assets/banners/banner-mask.webp"); }
body.default .projectBannerContainer { aspect-ratio: 2 / 1; }
body.default .projectBanner { background-size: cover; background-position: center top; mask-image: url("/projects/assets/banners/banner-mask-small.webp"); }
@media (max-width: 900px) {
    .projectBannerContainer,
    body.default .projectBannerContainer { aspect-ratio: 1.5 / 1; }
    .projectBanner,
    body.default .projectBanner { background-size: 150%; background-position: top 66.67% left 50%; mask-image: url("/projects/assets/banners/banner-mask-small.webp"); }
}
@media (max-width: 600px) {
    .projectBannerContainer,
    body.default .projectBannerContainer { aspect-ratio: 1 / 1; }
    .projectBanner,
    body.default .projectBanner { background-size: 200%; background-position: top 50% left 50%; mask-image: url("/projects/assets/banners/banner-mask-tiny.webp"); }
}

body.themeContrast .projectBanner { --bannerImage: var(--bannerImageContrast); }
body.themeDark .projectBanner { --bannerImage: var(--bannerImageDark); }
body.themeLight .projectBanner { --bannerImage: var(--bannerImageLight); }

@media (max-width: 900px) {
    .projectHeader {
        flex-flow: column;
        gap: var(--unit);
        padding-bottom: var(--unitSmall);
    }
    .projectHeaderInfoContainer {
        max-width: 100%;
        padding-top: 0;
    
        display: flex;
        justify-content: start;
    }
    .projectHeaderInfo {
        justify-content: start;
    }
}

/* virtualReality */
.virtualRealityEnvironmentButtons {
    width: 100%;
    max-width: var(--contentMaxWidth);
    margin-left: auto; margin-right: auto;
    margin-block: var(--unit);
    padding-left: var(--unitLarge);
    padding-right: var(--unitLarge);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--unitSmall);
}
.virtualRealityEnvironmentButton {
    width: 100%;
    min-height: var(--buttonSize);
    cursor: pointer;
    border: solid var(--strokeWidth) var(--backgroundTertiary);
}
.virtualRealityEnvironmentButton:last-child { border-radius: 0 var(--unitSmall) var(--unitSmall) 0; }
.virtualRealityEnvironmentButton { border-radius: 0; }
.virtualRealityEnvironmentButton:first-child { border-radius: var(--unitSmall) 0 0 var(--unitSmall); }
.virtualRealityEnvironmentButton:hover { background-color: var(--backgroundSecondary) }
.virtualRealityEnvironmentButton:active { background-color: var(--backgroundTertiary) }
.virtualRealityEnvironmentButton.active { background-color: var(--accent); border-color: var(--accent); }
.virtualRealityEnvironmentButton.active p { color: var(--backgroundPrimary) }

/* clique */
.cliqueAppearanceButtons {
    width: 100%;
    max-width: var(--contentMaxWidth);
    margin-left: auto; margin-right: auto;
    margin-block: var(--unit);
    padding-left: var(--unitLarge);
    padding-right: var(--unitLarge);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--unitSmall);
}
.cliqueAppearanceButton {
    width: 100%;
    min-height: var(--buttonSize);
    cursor: pointer;
    border: solid var(--strokeWidth) var(--backgroundTertiary);
}
.cliqueAppearanceButton:hover { background-color: var(--backgroundSecondary) }
.cliqueAppearanceButton:active { background-color: var(--backgroundTertiary) }
.cliqueAppearanceButton.active { background-color: var(--accent); border-color: var(--accent); }
.cliqueAppearanceButton.active p { color: var(--backgroundPrimary) }
.cliqueAppearanceButton:last-child { border-radius: 0 var(--unitSmall) var(--unitSmall) 0; }
.cliqueAppearanceButton { border-radius: 0; }
.cliqueAppearanceButton:first-child { border-radius: var(--unitSmall) 0 0 var(--unitSmall); }


/* method */
.methodAppearanceButtons {
    width: 100%;
    max-width: var(--contentMaxWidth);
    margin-left: auto; margin-right: auto;
    margin-block: var(--unit);
    padding-left: var(--unitLarge);
    padding-right: var(--unitLarge);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--unitSmall);
}
.methodAppearanceButton {
    width: 100%;
    min-height: var(--buttonSize);
    cursor: pointer;
    border: solid var(--strokeWidth) var(--backgroundTertiary);
}
.methodAppearanceButton:hover { background-color: var(--backgroundSecondary) }
.methodAppearanceButton:active { background-color: var(--backgroundTertiary) }
.methodAppearanceButton.active { background-color: var(--accent); border-color: var(--accent); }
.methodAppearanceButton.active p { color: var(--backgroundPrimary) }
.methodAppearanceButton:last-child { border-radius: 0 var(--unitSmall) var(--unitSmall) 0; }
.methodAppearanceButton { border-radius: 0; }
.methodAppearanceButton:first-child { border-radius: var(--unitSmall) 0 0 var(--unitSmall); }