/* The film and story artwork give this event its character within the site's visual system. */
.phantasmagoria-page {
    background: var(--paper);
}

.phantasmagoria-page main {
    min-width: 0;
}

.phantasmagoria-eyebrow,
.phantasmagoria-hero__scroll,
.phantasmagoria-intro__meta,
.phantasmagoria-intro__dates > span,
.phantasmagoria-story__chapters article > span,
.phantasmagoria-portal figcaption > span,
.phantasmagoria-world > div > span,
.phantasmagoria-worlds__hint,
.phantasmagoria-film__runtime {
    font: 600 .68rem/1.45 var(--mono);
    letter-spacing: .11em;
    text-transform: uppercase;
}

.phantasmagoria-hero {
    position: relative;
    isolation: isolate;
    min-height: min(980px, 100svh);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
    padding: calc(var(--site-header-height, 74px) + 2rem) 1.4rem clamp(2rem, 4vw, 4rem);
    color: var(--paper);
    background: var(--ink);
}

.phantasmagoria-hero__poster,
.phantasmagoria-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.phantasmagoria-hero__poster {
    z-index: -3;
}

.phantasmagoria-hero__video {
    z-index: -2;
    opacity: 0;
}

.phantasmagoria-hero__video.is-playing {
    opacity: 1;
}

.phantasmagoria-hero__play {
    position: absolute;
    z-index: 1;
    top: calc(var(--site-header-height, 74px) + 1.25rem);
    right: 1.4rem;
    display: inline-block;
    padding: .75rem 1rem;
    border: 1px solid currentColor;
    color: var(--paper);
    background: rgba(17, 18, 15, .8);
    font: 600 .68rem/1.45 var(--mono);
    letter-spacing: .04em;
    cursor: pointer;
}

.phantasmagoria-hero__play[hidden] {
    display: none;
}

.phantasmagoria-hero__play:hover,
.phantasmagoria-hero__play:focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

.phantasmagoria-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(6, 10, 17, .86), rgba(6, 10, 17, .12) 68%),
        linear-gradient(90deg, rgba(6, 10, 17, .28), transparent 70%);
}

.phantasmagoria-hero__title-block {
    width: min(100%, 82rem);
    margin-top: auto;
    padding-top: clamp(5rem, 12vh, 10rem);
    animation: pg-copy-enter .9s .1s ease-out both;
}

.phantasmagoria-hero .phantasmagoria-eyebrow {
    margin: 0 0 1rem;
    color: var(--yellow);
}

.phantasmagoria-hero h1 {
    margin: 0;
    font: 800 clamp(3.5rem, 7.2vw, 8.5rem)/.9 var(--sans);
    letter-spacing: -.08em;
    white-space: nowrap;
    text-shadow: 0 .08em .35em rgba(0, 0, 0, .35);
}

.phantasmagoria-hero__scroll {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(3.5rem, 11vh, 8rem);
    padding-top: 1rem;
    color: var(--paper);
    border-top: 1px solid rgba(246, 242, 233, .65);
}

.phantasmagoria-hero__scroll:hover,
.phantasmagoria-hero__scroll:focus-visible {
    color: var(--yellow);
}

.phantasmagoria-hero__scroll span {
    font-size: 1.2rem;
}

.phantasmagoria-intro {
    padding: clamp(3rem, 5vw, 5rem) 1.4rem clamp(6rem, 9vw, 10rem);
    color: var(--ink);
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
}

.phantasmagoria-intro__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ink);
}

.phantasmagoria-intro__meta .page-breadcrumbs {
    color: inherit;
}

.phantasmagoria-intro__body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr);
    align-items: end;
    gap: clamp(3rem, 7vw, 9rem);
    padding-top: clamp(5rem, 8vw, 9rem);
}

.phantasmagoria-intro .phantasmagoria-eyebrow {
    color: var(--orange);
}

.phantasmagoria-intro h2 {
    margin: 1.3rem 0 0;
    font: 700 clamp(4rem, 7.5vw, 9rem)/.94 var(--sans);
    letter-spacing: -.075em;
}

.phantasmagoria-intro h2 em {
    color: var(--orange);
    font-style: normal;
}

.phantasmagoria-intro__aside {
    max-width: 30rem;
    padding-bottom: .35rem;
}

.phantasmagoria-intro__aside > p {
    margin: 0 0 2.5rem;
    font: 400 clamp(1.15rem, 1.65vw, 1.5rem)/1.55 var(--sans);
}

.phantasmagoria-intro__dates {
    display: grid;
    gap: .7rem;
    padding-block: 1.3rem;
    border-block: 1px solid var(--ink);
}

.phantasmagoria-intro__dates > span {
    color: var(--orange);
}

.phantasmagoria-intro__dates strong {
    font: 600 clamp(1.3rem, 2vw, 2rem)/1.15 var(--sans);
    letter-spacing: -.04em;
}

.phantasmagoria-intro__aside > a {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1.25rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid currentColor;
    font: 600 .75rem/1.4 var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.phantasmagoria-intro__aside > a:hover,
.phantasmagoria-intro__aside > a:focus-visible {
    color: var(--orange);
}

.phantasmagoria-close__aside a {
    min-height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: .9rem 1.2rem;
    border: 1px solid var(--ink);
    box-shadow: 4px 4px 0 var(--yellow);
    font: 600 .7rem/1.3 var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.phantasmagoria-story {
    position: relative;
    padding: clamp(7rem, 10vw, 10rem) 1.4rem clamp(5rem, 8vw, 8rem);
    background: var(--paper);
}

.phantasmagoria-story__opening {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 8rem);
}

.phantasmagoria-story .phantasmagoria-eyebrow,
.phantasmagoria-worlds .phantasmagoria-eyebrow {
    color: var(--orange);
}

.phantasmagoria-story h2,
.phantasmagoria-worlds h2,
.phantasmagoria-film h2,
.phantasmagoria-close h2 {
    margin: 1.1rem 0 0;
    font: 700 clamp(3.5rem, 6.1vw, 7rem)/.95 var(--sans);
    letter-spacing: -.075em;
}

.phantasmagoria-story h2 {
    max-width: 11ch;
    font-size: clamp(3.75rem, 6.2vw, 8.2rem);
}

.phantasmagoria-story h2 em {
    color: var(--orange);
    font-style: normal;
}

.phantasmagoria-story__copy {
    max-width: 38rem;
    margin-top: clamp(2rem, 4vw, 3.5rem);
    padding-left: clamp(1.25rem, 2vw, 2rem);
    border-left: 2px solid var(--orange);
}

.phantasmagoria-story__copy p {
    margin: 1.2rem 0 0;
    font: 400 clamp(1.05rem, 1.4vw, 1.35rem)/1.65 var(--sans);
}

.phantasmagoria-story__copy p:first-child {
    margin-top: 0;
    font-weight: 600;
}

.phantasmagoria-story__collage {
    position: relative;
    min-height: clamp(33rem, 45vw, 47rem);
    isolation: isolate;
}

.phantasmagoria-story__collage::before {
    content: "";
    position: absolute;
    inset: 13% 8%;
    border: 1px dashed rgba(17, 18, 15, .3);
    border-radius: 50%;
    transform: rotate(-16deg);
}

.phantasmagoria-story__collage-label,
.phantasmagoria-story__collage-stamp {
    position: absolute;
    z-index: 4;
    font: 600 .64rem/1.4 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.phantasmagoria-story__collage-label {
    top: 5%;
    left: 5%;
    color: var(--orange);
    transform: rotate(-8deg);
}

.phantasmagoria-story__collage-stamp {
    right: 2%;
    bottom: 9%;
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    color: var(--orange);
    text-align: center;
    border: 1px solid var(--orange);
    border-radius: 50%;
    transform: rotate(14deg);
}

.phantasmagoria-story__scrap {
    position: absolute;
    width: clamp(11rem, 20vw, 21rem);
    padding: .55rem .55rem 1.65rem;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: .65rem .7rem 0 rgba(17, 18, 15, .2);
}

.phantasmagoria-story__scrap img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.phantasmagoria-story__scrap--one {
    z-index: 1;
    top: 17%;
    left: 5%;
    transform: rotate(-15deg);
}

.phantasmagoria-story__scrap--two {
    z-index: 2;
    top: 3%;
    right: 2%;
    transform: rotate(12deg);
}

.phantasmagoria-story__scrap--three {
    z-index: 3;
    bottom: 1%;
    left: 30%;
    transform: rotate(-2deg);
}

.phantasmagoria-story__chapters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(4rem, 6vw, 7rem);
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--ink);
    box-shadow: .75rem .85rem 0 var(--orange);
}

.phantasmagoria-story__chapters article {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: clamp(2rem, 3vw, 3.5rem);
}

.phantasmagoria-story__chapters article + article {
    border-left: 1px solid var(--ink);
}

.phantasmagoria-story__chapters article::after {
    position: absolute;
    right: .4rem;
    bottom: -2rem;
    color: rgba(17, 18, 15, .09);
    font: 800 12rem/1 var(--sans);
    pointer-events: none;
}

.phantasmagoria-story__chapters article:nth-child(1)::after { content: "I"; }
.phantasmagoria-story__chapters article:nth-child(2)::after { content: "II"; }
.phantasmagoria-story__chapters article:nth-child(3)::after { content: "III"; }

.phantasmagoria-story__chapters article > * {
    position: relative;
    z-index: 1;
}

.phantasmagoria-story__chapters article > span {
    color: var(--orange);
}

.phantasmagoria-story__chapters h3 {
    margin: 2.5rem 0 .75rem;
    font: 700 clamp(1.8rem, 2.7vw, 3rem)/1.02 var(--sans);
    letter-spacing: -.055em;
}

.phantasmagoria-story__chapters p {
    max-width: 22rem;
    margin: 0;
    font: 400 .95rem/1.6 var(--sans);
}

.phantasmagoria-library {
    padding: clamp(5rem, 8vw, 9rem) 1.4rem 0;
    background: var(--ink);
}

.phantasmagoria-portal {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 6rem);
    margin: 0;
    color: var(--paper);
}

.phantasmagoria-portal img {
    width: 100%;
    height: 100%;
    max-height: 45rem;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 1px solid var(--yellow);
}

.phantasmagoria-portal figcaption {
    min-width: 0;
    padding-block: 2rem;
}

.phantasmagoria-portal figcaption > span {
    color: var(--yellow);
}

.phantasmagoria-portal figcaption strong {
    display: block;
    max-width: 11ch;
    margin-top: 1.5rem;
    font: 700 clamp(3rem, 5.2vw, 6.5rem)/.94 var(--sans);
    letter-spacing: -.07em;
}

.phantasmagoria-portal figcaption p {
    max-width: 18rem;
    margin: 2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(244, 198, 45, .55);
    font: 400 1.05rem/1.5 var(--sans);
}

.phantasmagoria-worlds {
    margin-top: clamp(5rem, 8vw, 9rem);
    padding: clamp(3rem, 5vw, 5rem) 0 clamp(7rem, 10vw, 11rem);
    color: var(--paper);
    border-top: 1px solid rgba(244, 198, 45, .55);
}

.phantasmagoria-worlds .phantasmagoria-eyebrow {
    color: var(--yellow);
}

.phantasmagoria-worlds__heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 3rem;
    margin-bottom: clamp(3.5rem, 6vw, 6rem);
}

.phantasmagoria-worlds h2 em,
.phantasmagoria-film h2 em,
.phantasmagoria-close h2 em {
    color: var(--yellow);
    font-style: normal;
}

.phantasmagoria-worlds__heading p {
    max-width: 19rem;
    margin: 0 0 .3rem;
    font: 400 1.05rem/1.5 var(--sans);
}

.phantasmagoria-worlds__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.9rem, 1.6vw, 1.8rem);
}

.phantasmagoria-world {
    min-width: 0;
    background: var(--paper);
    border: 1px solid var(--yellow);
    box-shadow: .5rem .6rem 0 var(--orange);
    transform: rotate(-1deg);
    transition: transform .35s ease, box-shadow .35s ease;
}

.phantasmagoria-world:nth-child(even) {
    transform: rotate(1deg) translateY(1.5rem);
}

.phantasmagoria-world:hover {
    transform: rotate(0) translateY(-.3rem);
    box-shadow: .8rem .9rem 0 var(--orange);
}

.phantasmagoria-world img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.phantasmagoria-world > div {
    min-height: 7.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem;
    color: var(--ink);
    border-top: 1px solid var(--ink);
}

.phantasmagoria-world > div > span {
    color: var(--orange);
}

.phantasmagoria-world h3 {
    margin: 0;
    font: 700 clamp(1.25rem, 1.8vw, 2rem)/1.08 var(--sans);
    letter-spacing: -.05em;
}

.phantasmagoria-worlds__hint {
    display: none;
}

.phantasmagoria-film {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: center;
    padding: clamp(6rem, 9vw, 10rem) 1.4rem;
    color: var(--paper);
    background: var(--ink);
}

.phantasmagoria-film .phantasmagoria-eyebrow {
    color: var(--yellow);
}

.phantasmagoria-film__copy > p {
    max-width: 26rem;
    margin: 2rem 0;
    font: 400 clamp(1.05rem, 1.45vw, 1.3rem)/1.6 var(--sans);
}

.phantasmagoria-film__runtime {
    display: block;
    padding-top: 1rem;
    color: var(--yellow);
    border-top: 1px solid rgba(248, 240, 222, .35);
}

.phantasmagoria-film__screen {
    min-width: 0;
    padding: .65rem;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: .8rem .8rem 0 var(--orange);
}

.phantasmagoria-film video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--ink);
}

.phantasmagoria-close {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 3rem;
    overflow: hidden;
    padding: clamp(6rem, 9vw, 10rem) 1.4rem;
    color: var(--ink);
    background: var(--orange);
}

.phantasmagoria-close > * {
    position: relative;
}

.phantasmagoria-close .phantasmagoria-eyebrow {
    color: var(--ink);
}

.phantasmagoria-close h2 em {
    color: var(--ink);
    background: var(--yellow);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.phantasmagoria-close__aside {
    max-width: 24rem;
}

.phantasmagoria-close__aside p {
    margin: 0 0 1.5rem;
    font: 400 1.05rem/1.6 var(--sans);
}

.phantasmagoria-close__aside a {
    width: 100%;
}

.phantasmagoria-close__aside a:hover,
.phantasmagoria-close__aside a:focus-visible {
    color: var(--ink);
    background: var(--yellow);
    box-shadow: 4px 4px 0 var(--ink);
}

@keyframes pg-copy-enter {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1050px) {
    .phantasmagoria-intro__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 3.5rem;
    }

    .phantasmagoria-story__opening,
    .phantasmagoria-portal,
    .phantasmagoria-film {
        grid-template-columns: minmax(0, 1fr);
    }

    .phantasmagoria-story__collage {
        width: min(100%, 42rem);
        min-height: 37rem;
        justify-self: center;
    }

    .phantasmagoria-story__scrap {
        width: clamp(11rem, 28vw, 16rem);
    }

    .phantasmagoria-portal img {
        max-height: 35rem;
        aspect-ratio: 16 / 9;
    }

    .phantasmagoria-portal figcaption {
        padding: 0;
    }

    .phantasmagoria-worlds__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }

    .phantasmagoria-close {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .phantasmagoria-hero {
        min-height: max(42rem, 100svh);
        padding: calc(var(--site-header-height, 64px) + 1.5rem) 1.4rem 2.5rem;
    }

    .phantasmagoria-hero__poster,
    .phantasmagoria-hero__video {
        object-position: center;
    }

    .phantasmagoria-hero::after {
        background: linear-gradient(0deg, rgba(7, 11, 17, .92), rgba(7, 11, 17, .04) 78%);
    }

    .phantasmagoria-hero__title-block {
        padding-top: 6rem;
    }

    .phantasmagoria-hero h1 {
        font-size: clamp(2rem, 8.1vw, 4.2rem);
    }

    .phantasmagoria-hero__scroll {
        margin-top: 4rem;
    }

    .phantasmagoria-intro {
        padding-block: 2.5rem 5.5rem;
    }

    .phantasmagoria-intro__meta > span {
        display: none;
    }

    .phantasmagoria-intro__body {
        gap: 2.75rem;
        padding-top: 4rem;
    }

    .phantasmagoria-intro h2 {
        font-size: clamp(3.1rem, 11vw, 5rem);
    }

    .phantasmagoria-intro__aside > p {
        margin-bottom: 2rem;
    }

    .phantasmagoria-intro__dates strong {
        font-size: 1.55rem;
    }

    .phantasmagoria-story {
        padding-top: 6.5rem;
    }

    .phantasmagoria-story__opening {
        gap: 2rem;
    }

    .phantasmagoria-story h2,
    .phantasmagoria-worlds h2,
    .phantasmagoria-film h2,
    .phantasmagoria-close h2 {
        font-size: clamp(3.2rem, 13vw, 5rem);
    }

    .phantasmagoria-story__collage {
        min-height: clamp(24rem, 100vw, 31rem);
    }

    .phantasmagoria-story__scrap {
        width: clamp(9rem, 40vw, 13rem);
        padding: .35rem .35rem 1rem;
    }

    .phantasmagoria-story__collage-stamp {
        right: 0;
        bottom: 2%;
        width: 5.5rem;
        height: 5.5rem;
        font-size: .52rem;
    }

    .phantasmagoria-story__chapters {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 2rem;
    }

    .phantasmagoria-story__chapters article {
        padding: 1.6rem;
    }

    .phantasmagoria-story__chapters article + article {
        border-top: 1px solid var(--ink);
        border-left: 0;
    }

    .phantasmagoria-story__chapters h3 {
        margin-top: 1rem;
    }

    .phantasmagoria-story__chapters article::after {
        bottom: -1.5rem;
        font-size: 8rem;
    }

    .phantasmagoria-portal img {
        min-height: 19rem;
        aspect-ratio: 4 / 3;
        object-position: center;
    }

    .phantasmagoria-portal figcaption strong {
        font-size: clamp(3rem, 11vw, 4.4rem);
    }

    .phantasmagoria-worlds {
        margin-top: 4rem;
    }

    .phantasmagoria-worlds__heading {
        align-items: start;
        flex-direction: column;
        gap: 1.5rem;
    }

    .phantasmagoria-worlds__grid {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        margin-inline: -1.4rem;
        padding: 1rem 1.4rem 2rem;
        scrollbar-width: thin;
    }

    .phantasmagoria-world {
        flex: 0 0 min(76vw, 21rem);
        scroll-snap-align: start;
        transform: none !important;
    }

    .phantasmagoria-world > div {
        min-height: 7rem;
    }

    .phantasmagoria-worlds__hint {
        display: block;
        margin: 1rem 0 0;
        color: var(--yellow);
    }

    .phantasmagoria-film__screen {
        box-shadow: .4rem .4rem 0 var(--orange);
    }

    .phantasmagoria-close__aside a {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .phantasmagoria-hero__title-block {
        animation: none;
    }

    .phantasmagoria-world {
        transition: none;
    }
}