/* Open Studio Manifesto */

.block-type-open-studio-manifesto {
    grid-column: span 12;
}

.open-studio-manifesto {
    font-weight: var(--font-weight-primary);
    letter-spacing: var(--letter-spacing-primary);
}

.open-studio-manifesto__headline,
.open-studio-manifesto__statement,
.open-studio-manifesto__statement-static {
    margin: 0;
}

.open-studio-manifesto__headline {
    font-size: var(--open-studio-font-size-display);
    line-height: 1;
}

.open-studio-manifesto__statement,
.open-studio-manifesto__statement-static {
    font-size: var(--open-studio-font-size-large);
    line-height: 1.4;
}

.open-studio-manifesto__rotator {
    position: relative;
    min-height: 1.15em;
}

.open-studio-manifesto__statement {
    position: absolute;
    inset: 0 auto auto 0;
    opacity: 0;
    pointer-events: none;
}

.open-studio-manifesto__statement.is-active {
    position: relative;
    opacity: 1;
}

.open-studio-manifesto__toggle {
    display: block;
    margin-top: var(--open-studio-type-space-small);
    padding: 0;
    border: 0;
    appearance: none;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--open-studio-font-size-base);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.open-studio-manifesto__group + .open-studio-manifesto__group {
    margin-top: 1.15em;
}

@media (prefers-reduced-motion: reduce) {
    .open-studio-manifesto__statement {
        transition: none;
        transform: none;
    }
}

@media (min-width: 992px) {
    .open-studio-manifesto__headline {
        font-size: var(--open-studio-font-size-display);
    }

    .open-studio-manifesto__statement,
    .open-studio-manifesto__statement-static {
        font-size: var(--open-studio-font-size-large);
    }
}

@media (min-width: 1400px) {
    .open-studio-manifesto__headline {
        font-size: var(--open-studio-font-size-display);
    }
}

.open-studio-manifesto__headline {
    margin-bottom: var(--open-studio-type-space-medium);
}

.open-studio-manifesto__group + .open-studio-manifesto__group {
    margin-top: 120px;
}

/* Collapsed manifesto: headline and rotating statement form one large headline */
.open-studio-manifesto__collapsed .open-studio-manifesto__statement {
    font-size: var(--open-studio-font-size-display);
    line-height: 1;
}

@media (min-width: 992px) {
    .open-studio-manifesto__collapsed .open-studio-manifesto__statement {
        font-size: var(--open-studio-font-size-display);
    }
}

@media (min-width: 1400px) {
    .open-studio-manifesto__collapsed .open-studio-manifesto__statement {
        font-size: var(--open-studio-font-size-display);
    }
}

/* Collapsed manifesto reads as one continuous two-line headline */
.open-studio-manifesto__collapsed .open-studio-manifesto__headline {
    margin-bottom: 0;
}

/* Keep the Manifesto starting point stable in both collapsed and expanded states.
   Target the block itself so this does not depend on the page blueprint/body class. */
.block-type-open-studio-manifesto {
    padding-top: calc(50svh - 190px);
}

@media (max-width: 991px) {
    .block-type-open-studio-manifesto {
        padding-top: calc(50svh - 160px);
    }
}


/* Manifesto page state
   While the Manifesto is collapsed, Page Footer and Site Footer are hidden.
   The Micro Site Footer is intentionally unaffected. Using :has() keeps this
   correct from the first paint, before the Manifesto JavaScript initializes. */
body:has(.open-studio-manifesto:not(.is-expanded)) > .open-studio-page-footer,
body:has(.open-studio-manifesto:not(.is-expanded)) > .open-studio-site-footer {
    display: none;
}

/* Never hide a page footer that belongs to the injected overlay. */
body:has(.open-studio-manifesto:not(.is-expanded))
.open-studio-page-overlay__content > .open-studio-page-footer {
    display: block;
}