/* #region Hero */
/* Eleven characters a line, the measure Odoardo Research™, the bookshop and the journal already use.
   „Przestrzeni" is eleven on its own, so at the house default of eight it hangs out of its box and the
   title reads as three ragged lines where two are meant. */
.hero-cinematic--filmable .h-title {
    max-width: 11ch;
}
/* #endregion */

/* #region Gallery */
.filmable-gallery {
    --gallery-tilt-x: 0deg;
    --gallery-tilt-y: 0deg;
    position: relative;
    /* The floor gives way to a short screen, so the heading beneath is not pushed off the first one. */
    height: clamp(min(820px, 100svh), 112vh, 1180px);
    overflow: hidden;
    isolation: isolate;
    background: var(--surface-editorial);
    border-block: 1px solid var(--line);
}

.filmable-gallery-field {
    position: absolute;
    inset: -8% -12%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: clamp(12px, 1.4vw, 24px);
    transform: perspective(1600px) rotateX(var(--gallery-tilt-y)) rotateY(var(--gallery-tilt-x)) rotateZ(-3deg) scale(1.08);
    transform-style: preserve-3d;
    will-change: transform;
}

.filmable-gallery-row {
    display: flex;
    flex: 0 0 auto;
    gap: clamp(10px, 1.1vw, 19px);
    width: max-content;
    transform: translate3d(var(--gallery-shift, 0px), 0, 0);
    will-change: transform;
}

.filmable-gallery-row--1,
.filmable-gallery-row--5 {
    margin-left: -5vw;
}

.filmable-gallery-row--2,
.filmable-gallery-row--4 {
    margin-left: -15vw;
}

.filmable-gallery-row--3 {
    margin-left: 2vw;
}

.filmable-gallery-frame {
    position: relative;
    width: clamp(150px, 16vw, 270px);
    aspect-ratio: 1;
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    box-shadow: 0 18px 55px rgba(5, 5, 5, .48);
    opacity: .82;
    transition: opacity var(--motion-quick) var(--ease-house), transform 1.8s var(--ease-house), border-color var(--motion) var(--ease-house);
}

    .filmable-gallery-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid var(--hairline-faint);
        pointer-events: none;
        transition: border-color var(--motion) var(--ease-house);
    }

    .filmable-gallery-frame img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        filter: var(--photo-at-rest);
        transform: scale(1.015);
        transition: filter var(--motion-slow) var(--ease-house), transform 1.8s var(--ease-house);
    }

    .filmable-gallery-frame span {
        position: absolute;
        right: 10px;
        bottom: 8px;
        color: rgba(245, 245, 245, .72);
        font-family: var(--font-mono);
        font-size: .55rem;
        letter-spacing: .12em;
        text-shadow: 0 1px 8px #050505;
    }

    /* The frame comes forward by a hair and its mount warms to gold; it does not lift off the field. */
    .filmable-gallery-frame:hover {
        z-index: 2;
        opacity: 1;
        transform: scale(1.02);
    }

        .filmable-gallery-frame:hover::after {
            border-color: var(--photo-frame-hover);
        }

        .filmable-gallery-frame:hover img {
            filter: var(--photo-lifted);
            transform: scale(1.025);
        }

.filmable-gallery-row:has(.filmable-gallery-frame:hover) .filmable-gallery-frame:not(:hover) {
    opacity: .58;
}

.filmable-gallery-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 42% 38% at center, rgba(5, 5, 5, .93) 0%, rgba(5, 5, 5, .77) 43%, rgba(5, 5, 5, .12) 100%), linear-gradient(90deg, rgba(5, 5, 5, .78), transparent 18%, transparent 82%, rgba(5, 5, 5, .78)), linear-gradient(0deg, rgba(5, 5, 5, .64), transparent 18%, transparent 82%, rgba(5, 5, 5, .64));
}

.filmable-gallery-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: min(88vw, 720px);
    text-align: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

    .filmable-gallery-copy h2 {
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(3rem, 6.5vw, 6.8rem);
        font-weight: 200;
        letter-spacing: -.035em;
        line-height: .9;
        text-shadow: 0 10px 45px rgba(5, 5, 5, .9);
    }

        .filmable-gallery-copy h2 i {
            color: var(--gold);
            font-weight: 200;
        }

    .filmable-gallery-copy p {
        max-width: 520px;
        margin: clamp(1.8rem, 4vh, 3rem) auto 0;
        color: var(--white-soft);
        font-size: clamp(.86rem, 1vw, 1rem);
        font-weight: 300;
        line-height: 1.75;
    }

/* No viewfinder reticle closing this block: at 76×36 under a heading it reads as a stray gold rectangle
   rather than as a camera's frame, and the mosaic behind it already says what the section is about. */
/* #endregion */

/* #region Selection journey */
/* The section's own layout is the house's .journey component now — one photograph, the steps beside
   it — and lives in product-sections.css, which every product page loads. It moved there so the Lens
   anatomy could stand on the same pattern instead of a copy of it. What stays here is the little this
   page adds to it. */

/* #endregion */

/* #region What the entrant receives */
/* Square tiles on the journey's own geometry — the rotated diamond index is reused verbatim, so the
   section reads as another page of the same document rather than a new layout. */
.filmable-kit {
    position: relative;
    overflow: hidden;
    padding: var(--section-space) 0;
    border-bottom: 1px solid var(--section-divider);
    background: radial-gradient(circle at 88% 18%, var(--tint), transparent 30%), var(--black);
}

    .filmable-kit > .container {
        position: relative;
        width: min(90vw, var(--section-content-max));
        max-width: none;
        margin-inline: auto;
        padding-inline: 0;
    }

.filmable-kit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.4vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Lower than a square. Six of these stood as six full squares, so a section listing what arrives
   with a nomination took two screens and every tile carried a hand's width of empty ground under
   three lines of text. The height now follows the copy, with a floor so the row stays even. */
.filmable-kit-item {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    min-height: clamp(210px, 20vw, 260px);
    padding: clamp(1.6rem, 2.4vw, 2.4rem);
    border: 1px solid var(--line);
    transition: border-color var(--motion) var(--ease-house), background var(--motion) var(--ease-house);
}

    .filmable-kit-item:hover {
        border-color: var(--gold-border);
        background: linear-gradient(140deg, rgba(var(--gold-rgb),.08), transparent 62%);
    }

    .filmable-kit-item:hover .journey-index::before,
    .filmable-kit-item:hover .journey-index::after {
        border-color: var(--gold);
        transform: rotate(0deg);
    }

    /* A little more air under the number than between the two lines of text below it, so the numeral
       reads as the item's mark rather than as the first line of its title. Added on the index alone:
       the column's gap still governs the space between the heading and its paragraph. */
    .filmable-kit-item .journey-index {
        margin-bottom: .45rem;
    }

    .filmable-kit-item h3 {
        margin: 0;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.25rem, 1.7vw, 1.7rem);
        font-weight: 300;
        letter-spacing: -.02em;
        line-height: 1.1;
        /* The same balance the artist page's „co otrzymujesz" titles carry — this is the identical
           pattern (a card list of what arrives in one delivery) and it had the identical orphan. */
        text-wrap: balance;
    }

        .filmable-kit-item h3 i {
            color: var(--gold);
        }

    .filmable-kit-item p {
        margin: 0;
        color: var(--text-muted);
        font-size: 1rem;
        font-weight: 200;
        line-height: 1.8;
    }

@media (max-width: 900px) {
    .filmable-kit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .filmable-kit-grid {
        grid-template-columns: 1fr;
    }

    /* A square tile on a phone would be mostly empty space above a short paragraph. */
    .filmable-kit-item {
        aspect-ratio: auto;
    }
}
/* #endregion */

/* #region Closing section */
.filmable-closing {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--tint), transparent 42%), var(--surface-editorial);
}

    .filmable-closing::before {
        position: absolute;
        top: 50%;
        right: -11rem;
        width: 30rem;
        aspect-ratio: 1;
        border: 1px solid var(--hairline);
        border-radius: 50%;
        content: "";
        transform: translateY(-50%);
        pointer-events: none;
    }

    .filmable-closing > .container {
        position: relative;
        max-width: 58rem;
        text-align: left;
    }

    .filmable-closing h2 {
        max-width: 10ch;
        margin: 1.5rem 0 2.5rem;
    }

    .filmable-closing p {
        margin-top: 32px;
        color: var(--text-muted);
        font-size: .86rem;
        line-height: 1.8;
    }

.filmable-closing--application {
    isolation: isolate;
    background: linear-gradient(90deg, var(--hairline-faint) 1px, transparent 1px) center / min(9vw, 8rem) 100%, radial-gradient(circle at 78% 46%, var(--tint-raised), transparent 27%), var(--surface-editorial);
}

    .filmable-closing--application::before {
        top: 50%;
        right: max(5vw, calc((100vw - var(--section-content-max)) / 2));
        width: min(42vw, 38rem);
        border-color: var(--hairline);
        border-radius: 0;
        transform: translateY(-50%) rotate(45deg);
    }

    .filmable-closing--application::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(112deg, rgba(5, 5, 5, .94) 0 48%, transparent 69%);
        content: "";
        pointer-events: none;
    }

    .filmable-closing--application > .filmable-closing-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
        gap: clamp(4rem, 9vw, 10rem);
        align-items: center;
        max-width: none;
    }

.filmable-closing-copy {
    position: relative;
    z-index: 1;
}

    .filmable-closing-copy h2 {
        max-width: 12ch;
        margin: 0;
    }

.filmable-closing .filmable-closing-lead {
    max-width: 58ch;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    color: rgba(245, 245, 245, .66);
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.85;
}

.filmable-closing-action {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

    .filmable-closing-action > span {
        max-width: 14ch;
        color: var(--text-muted);
        font-size: .7rem;
        letter-spacing: .1em;
        line-height: 1.5;
        text-transform: uppercase;
    }

/* A square that is a floor, not a ceiling. The mark inside is three stacked lines — a label, the year at
   up to 8.5rem, and a badge — and forcing the box to stay square pushes all three out through the bottom
   border wherever the column is narrower than the type, leaving the frame with nothing in it. */
.filmable-closing-edition {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: min(100%, 30rem);
    padding: clamp(1.5rem, 3vw, 3rem);
    border: 1px solid var(--hairline-strong);
    background: linear-gradient(135deg, var(--tint-raised), transparent 42%), linear-gradient(315deg, var(--tint), transparent 48%), rgba(5, 5, 5, .92);
    box-shadow: 0 3rem 7rem rgba(5, 5, 5, .48);
}

    .filmable-closing-edition::before {
        position: absolute;
        inset: 1rem;
        border: 1px solid rgba(245, 245, 245, .07);
        content: "";
        pointer-events: none;
        z-index: 1;
    }

/* The strip of real frames, running behind the stamp — the same reel the Filmable banner uses, so
   the two speak with one image. Darkened hard: what stands in front of it is a year and two words,
   and a bright reel would swallow both. */
.filmable-closing-reel {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

    .filmable-closing-reel .filmable-callout-marquee-item {
        filter: var(--photo-mute) var(--photo-under-type);
    }

    /* The mark sits in a pool of its own so the year never lands on a bright frame. */
    .filmable-closing-reel::after {
        position: absolute;
        inset: 0;
        content: "";
        background: radial-gradient(circle at 50% 50%, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .72) 45%, rgba(5, 5, 5, .55) 100%);
    }

.filmable-closing-corner {
    position: absolute;
    z-index: 2;
    width: 3rem;
    aspect-ratio: 1;
    border-color: var(--hairline-strong);
    pointer-events: none;
}

.filmable-closing-corner--top {
    top: -.4rem;
    right: -.4rem;
    border-top: 1px solid;
    border-right: 1px solid;
}

.filmable-closing-corner--bottom {
    bottom: -.4rem;
    left: -.4rem;
    border-bottom: 1px solid;
    border-left: 1px solid;
}

.filmable-closing-edition-mark {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

    .filmable-closing-edition-mark > span {
        color: rgba(245, 245, 245, .5);
        font-size: .62rem;
        letter-spacing: .5em;
    }

    .filmable-closing-edition-mark strong {
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(4.8rem, 9vw, 8.5rem);
        font-weight: 300;
        letter-spacing: -.08em;
        line-height: .9;
    }

    .filmable-closing-edition-mark em {
        /* Clamped, not flat: a fixed 3.85rem is tuned for one width and overflows every narrower one. */
        margin-top: clamp(1.4rem, 4vh, 3.2rem);
        /* No pill: the open edition is the stamp's one gold figure, and it breathes rather than beats. */
        padding: .55rem .9rem;
        border: 1px solid transparent;
        color: var(--gold);
        font-size: .58rem;
        font-style: normal;
        letter-spacing: .5em;
        animation: filmableEditionBreath var(--breath-period) var(--ease-house) infinite;
    }

@keyframes filmableEditionBreath {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .filmable-closing-edition-mark em {
        animation: none;
    }
}

/* Under the button, in the copy column — not a band across the foot of the section. The three
   promises answer the hesitation the button provokes, so they are read where the button is. */
.filmable-closing .filmable-closing-promise {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    margin: clamp(1.6rem, 3vh, 2.4rem) 0 0;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(245, 245, 245, .1);
    text-align: left;
}

.filmable-closing-promise-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: .6rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .filmable-closing-promise-list li {
        position: relative;
        padding: .4rem .95rem;
        border: 1px solid var(--hairline-strong);
        color: rgba(245, 245, 245, .5);
        font-family: var(--font-mono);
        font-size: .6rem;
        font-weight: 400;
        letter-spacing: clamp(.15em, 1vw, .3em);
        text-transform: uppercase;
        white-space: normal;
        text-align: center;
    }

.filmable-closing-promise p {
    margin: 0;
    color: rgba(245, 245, 245, .48);
    font-size: .78rem;
    letter-spacing: .03em;
    line-height: 1.7;
}

/* #endregion */

/* #region Profile exhibit */
/* Flat black, no glow. The section opens directly under the header's own black bar, and a gold wash in
   the top-left corner drew a visible seam between the two — a lit corner reads as a mistake in the
   header, not as an effect on the page. */
.filmable-exhibit {
    position: relative;
    overflow: hidden;
    padding: clamp(8rem, 16svh, 11.5rem) 5vw clamp(4rem, 8vh, 6.5rem);
    background: var(--black);
}

.filmable-exhibit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(20rem, .98fr);
    gap: clamp(3rem, 7vw, 7.5rem);
    align-items: center;
}

.filmable-exhibit-frame {
    position: relative;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    box-shadow: 0 2.5rem 6.5rem rgba(5, 5, 5, .55);
}

    /* No frame written here. This picture carries the house's closed passe-partout, which lives once
       in product-sections.css — .filmable-exhibit-frame::after is on that rule's selector list. It
       must not draw its own at inset 1rem in white, which is how the yearbook's exhibit and the product
       pages' pictures end up wearing two different mounts. */

    .filmable-exhibit-frame img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.filmable-exhibit-frame-caption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
    background: linear-gradient(90deg, rgba(5, 5, 5, .82), rgba(5, 5, 5, .46));
    color: rgba(245, 245, 245, .66);
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.filmable-exhibit-plaque h1 {
    max-width: 14ch;
    margin: 0;
    color: var(--white);
    font-family: var(--font-display);
    /* The name is user-supplied — it must scale down and break rather than be clipped. */
    font-size: clamp(1.9rem, 9vw, 5rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1;
    /* Breaks where it must, but never with a hyphen — a name is not a word to be divided. */
    overflow-wrap: anywhere;
}

/* Beside the picture the plaque's column is some 400px on a landscape tablet, and 9vw had already
   reached its cap there — „Restauracja" broke in the middle. */
@media (min-width: 901px) {
    .filmable-exhibit-plaque h1 {
        font-size: clamp(1.9rem, 5vw, 5rem);
    }
}

/* The seal is the one word on this plaque that is a verdict, so it stands apart from the name above it
   and from the sentence that explains it below — the air is what makes it read as a stamp rather than
   as the next line of the heading. The gap under it is set on the note that follows, so each gap on
   this plaque is owned by exactly one rule rather than by a margin on both sides of it. */
.filmable-exhibit-seal {
    display: inline-flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: clamp(2.75rem, 5.5vh, 4rem);
}

    .filmable-exhibit-seal i {
        position: relative;
        display: inline-block;
        flex: 0 0 auto;
        width: 2.2rem;
        aspect-ratio: 1;
    }

        .filmable-exhibit-seal i::before,
        .filmable-exhibit-seal i::after {
            position: absolute;
            inset: 0;
            border: 1px solid rgba(var(--gold-rgb),.55);
            content: "";
            transform: rotate(45deg);
        }

        .filmable-exhibit-seal i::after {
            inset: 5px;
            border-color: var(--hairline-mid);
        }

    .filmable-exhibit-seal.is-laureate i::before {
        background: rgba(var(--gold-rgb),.16);
    }

    /* The diamond carries the verdict's gold; the word beside it stays white. */
    .filmable-exhibit-seal span {
        color: var(--white-soft);
        font-family: var(--font-mono);
        font-size: .68rem;
        letter-spacing: .3em;
        text-transform: uppercase;
    }

.filmable-exhibit-note {
    max-width: 46ch;
    margin-top: clamp(1.75rem, 3.5vh, 2.5rem);
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.8;
}

/* No rule above it. The bar reads as part of the status sentence it follows — the plaque's one
   hairline is the one under it, which separates what this space is from what a visitor can do. */
.filmable-exhibit-progress {
    margin-top: clamp(1.75rem, 3.5vh, 2.5rem);
}

.filmable-exhibit-progress-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .4rem 1.25rem;
    margin-bottom: .7rem;
    color: var(--text-muted);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.filmable-exhibit-progress-track {
    height: 2px;
    overflow: hidden;
    background: var(--line);
}

    .filmable-exhibit-progress-track span {
        display: block;
        height: 100%;
        background: var(--gold);
    }

/* The bar itself is the shared one from site.css — the same four ways out a journal article offers.
   All this holds is where it sits on the plaque. */
.filmable-exhibit-share {
    margin-top: clamp(2.25rem, 4.5vh, 3.25rem);
    padding-top: clamp(1.75rem, 3.5vh, 2.5rem);
    border-top: 1px solid var(--line);
}

.filmable-exhibit-annual {
    padding: clamp(4rem, 9vh, 7rem) 5vw;
    border-block: 1px solid var(--section-divider);
    background: var(--surface-editorial);
}

.filmable-exhibit-annual-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}

.filmable-exhibit-annual h2 {
    max-width: 14ch;
    margin-top: 1.25rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.2vw, 3.4rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.05;
}

    .filmable-exhibit-annual h2 i {
        color: var(--gold);
    }

.filmable-exhibit-annual-copy p {
    max-width: 56ch;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.85;
}

.filmable-exhibit-annual-copy .filmable-closing-promise-list {
    justify-content: flex-start;
    margin-top: 1.75rem;
}

@media (max-width: 1024px) {
    .filmable-exhibit-layout {
        gap: clamp(2.5rem, 5vw, 4rem);
        align-items: start;
    }
}

@media (max-width: 900px) {
    .filmable-exhibit {
        padding-top: clamp(7rem, 14svh, 9rem);
    }

    .filmable-exhibit-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .filmable-exhibit-plaque h1 {
        max-width: none;
    }

    /* Held sideways, a full-width square is two screens tall and the name sits under both. */
    @media (max-height: 500px) {
        .filmable-exhibit-frame {
            width: min(100%, 80svh);
        }
    }

    .filmable-exhibit-annual-layout {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
}

@media (max-width: 600px) {
    .filmable-exhibit-frame::after {
        inset: .6rem;
    }

    .filmable-exhibit-frame-caption {
        right: .6rem;
        bottom: .6rem;
        left: .6rem;
    }
}
/* #endregion */

/* #region Responsive */
@media (max-width: 800px) {
    .filmable-closing--application > .filmable-closing-layout {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .filmable-closing--application::before {
        top: auto;
        right: -20vw;
        bottom: 8%;
        width: 78vw;
        transform: rotate(45deg);
    }

    .filmable-closing-copy h2 {
        max-width: 11ch;
    }

    .filmable-closing-edition {
        width: 100%;
        max-width: 34rem;
        justify-self: end;
    }

    .filmable-closing-action {
        align-items: flex-start;
        flex-direction: column;
    }

        .filmable-closing-action > span {
            max-width: none;
        }

    .filmable-gallery {
        height: clamp(min(720px, 100svh), 96svh, 900px);
    }

    .filmable-gallery-field {
        inset: -3% -42%;
        gap: 10px;
        transform: rotateZ(-4deg) scale(1.04);
    }

    .filmable-gallery-frame {
        width: clamp(132px, 37vw, 180px);
    }

    .filmable-gallery-vignette {
        background: radial-gradient(ellipse 68% 40% at center, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .79) 48%, rgba(5, 5, 5, .18) 100%), linear-gradient(0deg, rgba(5, 5, 5, .7), transparent 20%, transparent 80%, rgba(5, 5, 5, .7));
    }

    .filmable-gallery-copy {
        width: min(86vw, 560px);
    }

        .filmable-gallery-copy h2 {
            font-size: clamp(2.2rem, 14vw, 5rem);
            overflow-wrap: break-word;
        }

        .filmable-gallery-copy p {
            max-width: 34ch;
        }
}

@media (max-width: 480px) {
    .filmable-closing-edition-mark strong {
        font-size: clamp(4rem, 24vw, 6.5rem);
    }

    /* The 720px floor made the decorative gallery taller than a phone screen. */
    .filmable-gallery {
        height: clamp(520px, 88svh, 900px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .filmable-gallery-field,
    .filmable-gallery-row,
    .filmable-gallery-frame,
    .filmable-gallery-frame img {
        transition: none;
        will-change: auto;
    }

        .filmable-gallery-frame:hover {
            transform: none;
        }
}
/* #endregion */