/* #region Gallery */
.art-gallery-growth {
    position: relative;
    overflow: hidden;
    padding: var(--section-space) 0;
    border-bottom: 1px solid var(--section-divider);
    background: var(--black);
}

    .art-gallery-growth::before {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(var(--hairline-faint) 1px, transparent 1px), linear-gradient(90deg, var(--hairline-faint) 1px, transparent 1px);
        background-position: center;
        background-size: min(8.333vw, 8.75rem) min(8.333vw, 8.75rem);
        content: "";
        opacity: .42;
        pointer-events: none;
        -webkit-mask-image: radial-gradient(circle at center, #050505, transparent 72%);
        mask-image: radial-gradient(circle at center, #050505, transparent 72%);
    }

.art-gallery-growth-inner {
    width: min(90vw, var(--section-content-max));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

.art-gallery-growth-heading {
    position: relative;
    z-index: 2;
    max-width: 46rem;
    margin-bottom: clamp(5rem, 10vw, 10rem);
}

    .art-gallery-growth-heading h2 {
        max-width: 12ch;
        margin: 0;
        color: var(--white);
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        letter-spacing: -.04em;
        line-height: var(--section-title-line-height);
    }

        .art-gallery-growth-heading h2 i,
        .art-gallery-growth-step h3 i {
            color: var(--gold);
            font-weight: 300;
        }

    .art-gallery-growth-heading > p {
        max-width: 42rem;
        margin: 2.5rem 0 0;
        color: var(--white-soft);
        font-size: clamp(1rem, 1.15vw, 1.1rem);
        font-weight: 300;
        line-height: 1.85;
    }

.art-gallery-growth-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    gap: clamp(2rem, 4vw, 5rem) clamp(1.5rem, 3vw, 3.5rem);
    align-items: start;
}

/* The four points of the section take the light in turn — the one being shown in the frame carries
   the gold rule, the other three step back. Four peers, not a scenario plus three steps — the first
   point as an <aside> with its own placement and its own type makes this one list name two things. */
.art-gallery-growth-step {
    opacity: .58;
    transition: opacity var(--motion) var(--ease-house), border-color var(--motion) var(--ease-house);
}

    .art-gallery-growth-step.is-active {
        opacity: 1;
        border-top-color: var(--gold);
    }

/* Pointing at a point is a way of choosing it, so it answers the cursor. */
.art-gallery-growth-step:hover {
    opacity: 1;
}

.art-gallery-growth-step-meta {
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-sans);
    font-size: .6rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.art-gallery-growth-exhibit {
    position: relative;
    grid-column: 4 / span 6;
    grid-row: 1 / span 3;
    width: 100%;
    margin: 0;
    aspect-ratio: 1;
}

    .art-gallery-growth-exhibit::before,
    .art-gallery-growth-exhibit::after {
        position: absolute;
        content: "";
        pointer-events: none;
    }

    .art-gallery-growth-exhibit::before {
        inset: -11%;
        border: 1px solid var(--hairline);
        transform: rotate(45deg);
    }

    .art-gallery-growth-exhibit::after {
        top: 50%;
        right: -18%;
        left: -18%;
        height: 1px;
        background: var(--hairline);
    }

/* THE FRAME IN THIS SECTION IS THE HOUSE'S OAK MODEL — _OakFrame, the same object that stands beside
   the price, so there is one frame in this house and not two that drift apart. Not a flat rectangle
   with a wood border-image, a stack of <img> elements sliding vertically past each other and a
   progress bar counting art.js's interval: that is a picture of a frame, with works crossing it
   rather than entering it. There is no clock either — the works change on the model's own reel, so a
   bar counting this script's interval counts towards a moment nobody is waiting for.

   The plate takes the room a flat frame would take, and it is not rotated: the model stands in real
   perspective and sways on its own, and a rotation on top of that fights the transform the object is
   built from. */
.art-gallery-growth-exhibit .oak-frame-plate {
    position: absolute;
    inset: 6%;
    z-index: 4;
    width: auto;
    margin: 0;
}

.art-gallery-growth-archive {
    position: absolute;
    aspect-ratio: 1;
    background: var(--surface-card);
    box-shadow: 0 2rem 6rem rgba(5, 5, 5, .6);
}

.art-gallery-growth-archive {
    display: flex;
    align-items: flex-end;
    width: 43%;
    padding: 1rem;
    border: 1px solid var(--hairline-mid);
    background: #050505;
}

.art-gallery-growth-archive--one {
    top: -5%;
    left: -8%;
    z-index: -3;
    transform: rotate(-8deg);
}

.art-gallery-growth-archive--two {
    top: 6%;
    right: -10%;
    z-index: -2;
    transform: rotate(7deg);
}

.art-gallery-growth-archive--three {
    right: -5%;
    bottom: -8%;
    z-index: -1;
    transform: rotate(3deg);
}

.art-gallery-growth-steps {
    display: contents;
}

/* Two on each side of the frame, reading down: one and three to its left, two and four to its
   right. The pairs are what the numbering follows, so the sequence a reader's eye takes and the
   figures printed on the points are the same order. */
.art-gallery-growth-step {
    position: relative;
    grid-column: 10 / -1;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.art-gallery-growth-step--1,
.art-gallery-growth-step--3 {
    grid-column: 1 / span 3;
}

.art-gallery-growth-step--4 {
    align-self: end;
}

.art-gallery-growth-step-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

    .art-gallery-growth-step-meta > span {
        font-family: var(--font-display);
        font-size: 1.35rem;
        font-weight: 300;
        letter-spacing: 0;
    }

    .art-gallery-growth-step-meta small {
        color: var(--white-ghost);
        font-size: .54rem;
        letter-spacing: .16em;
        text-align: right;
    }

.art-gallery-growth-step h3 {
    margin: 1.25rem 0 1.4rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.15vw, 2.35rem);
    font-weight: 300;
    line-height: 1.12;
}

.art-gallery-growth-step p {
    color: var(--text-muted);
    font-size: clamp(.82rem, .9vw, .92rem);
    font-weight: 300;
    line-height: 1.78;
}

@media (max-width: 1050px) {
    .art-gallery-growth-heading {
        max-width: none;
    }

    /* Three columns, the frame in the middle and a pair on each side of equal width. Six columns gave
       the right-hand pair a single one — under 100px on a portrait tablet, narrower than its heading. */
    .art-gallery-growth-stage {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    }

    .art-gallery-growth-exhibit {
        grid-column: 2;
        align-self: center;
    }

    /* Same pairs: the generic rule puts every point on the right and the two odd ones take the left
       back. The order of these two blocks is what decides it — one class each, so specificity is equal
       and the later rule wins. */
    .art-gallery-growth-step {
        grid-column: 3;
    }

    .art-gallery-growth-step--1,
    .art-gallery-growth-step--3 {
        grid-column: 1;
    }
}

@media (max-width: 760px) {
    .art-gallery-growth-heading {
        margin-bottom: 4.5rem;
    }

    .art-gallery-growth-stage {
        display: flex;
        flex-direction: column;
        gap: 3.5rem;
    }

    .art-gallery-growth-exhibit {
        width: min(82vw, 34rem, 80svh);
        margin: 3rem auto 5rem;
    }

    .art-gallery-growth-step {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .art-gallery-growth-exhibit {
        width: 78vw;
    }

    .art-gallery-growth-archive {
        padding: .65rem;
    }
}

/* A visitor who asked for less movement gets the section standing still. The frame's own reel and
   sway are already off for them — product.css stops both on the model itself — so what is left here
   is the tilt of the archive sheets and the diamond behind them. */
@media (prefers-reduced-motion: reduce) {
    .art-gallery-growth-archive,
    .art-gallery-growth-exhibit::before {
        transform: none;
    }
}
/* #endregion */

/* #region Soul */
.art-soul {
    position: relative;
    overflow: hidden;
    padding: calc(var(--section-space) + clamp(1rem, 2vw, 2rem)) 0 var(--section-space);
    border-bottom: 1px solid var(--section-divider);
    background: var(--surface-editorial);
}

    .art-soul::before {
        position: absolute;
        top: clamp(4rem, 9vw, 9rem);
        right: max(5vw, calc((100vw - var(--section-content-max)) / 2));
        width: min(40vw, 34rem);
        aspect-ratio: 1;
        border: 1px solid var(--hairline-faint);
        content: "";
        pointer-events: none;
        transform: rotate(45deg);
    }

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

.art-soul-heading {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    margin-bottom: clamp(4rem, 9vw, 9rem);
}

    .art-soul-heading h2 {
        max-width: 22ch;
        margin: 0;
        color: var(--white);
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        letter-spacing: -.04em;
        line-height: var(--section-title-line-height);
    }

        .art-soul-heading h2 i {
            color: var(--gold);
            font-weight: 300;
        }

    .art-soul-heading p {
        max-width: 39rem;
        margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
        color: var(--white-soft);
        font-size: clamp(1rem, 1.2vw, 1.15rem);
        font-weight: 300;
        line-height: 1.85;
    }

.art-soul-experience {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: center;
}

.art-soul-artwork {
    position: relative;
    width: min(100%, 42rem);
    aspect-ratio: 1;
}


.art-soul-frame {
    position: absolute;
    inset: 0;
    box-shadow: 0 3rem 8rem rgba(5, 5, 5, .72);
}

.art-soul-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: var(--photo-at-rest);
}


.art-soul-signal {
    position: absolute;
    top: 50%;
    right: 0;
    width: 28%;
    aspect-ratio: 1;
    transform: translate(42%, -50%);
}

    .art-soul-signal span {
        position: absolute;
        inset: calc(var(--ring) * 14%);
        border: 1px solid rgba(245, 245, 245, calc(.34 - var(--ring) * .08));
        border-radius: 50%;
        animation: artSoulPulse 4s ease-in-out infinite;
        animation-delay: calc(var(--ring) * .45s);
    }

        .art-soul-signal span:nth-child(1) {
            --ring: 0;
        }

        .art-soul-signal span:nth-child(2) {
            --ring: 1;
        }

        .art-soul-signal span:nth-child(3) {
            --ring: 2;
        }

@keyframes artSoulPulse {
    0%, 100% {
        opacity: .28;
        transform: scale(.88);
    }

    48% {
        opacity: .9;
        transform: scale(1);
    }
}

.art-soul-dialogue {
    position: relative;
    z-index: 1;
    padding: clamp(2rem, 4vw, 4rem);
    border: 1px solid var(--hairline);
    background: linear-gradient(145deg, var(--tint), transparent 45%), rgba(5, 5, 5, .92);
    box-shadow: 0 2rem 6rem rgba(5, 5, 5, .38);
}

.art-soul-dialogue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--line);
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: .65rem;
    letter-spacing: 8px;
    /* Declared beside the tracking it mirrors, the way .h-tag does it: letter-spacing is added
       after every glyph, the last one included, so a ™ in an eyebrow drifts off the name it marks
       unless sup.tm is told how much to give back. Every label wearing the house's 8px owes this
       line; a label that omits it shows the drift. */
    --tm-tracking: 8px;
    text-transform: uppercase;
    opacity: .9;
}

    .art-soul-dialogue-head i {
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: var(--gold);
        animation: artSoulPresence 2.4s ease-in-out infinite;
    }

/* The work's presence: the point dims and returns, with no glow around it. */
@keyframes artSoulPresence {
    50% {
        opacity: .4;
    }
}

/* The staged exchange: a transcript, not a chat window. Bubbles would make the page look like an
   application, and the thing being sold is a work that speaks — so the guest is set as the question
   in a printed interview and the work answers in the display italic it uses everywhere else. */
.art-soul-exchange {
    list-style: none;
    margin: clamp(2rem, 4vw, 3.2rem) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 2.6vw, 2.1rem);
}

.art-soul-exchange-item {
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 2.6vw, 2.1rem);
}

/* Played back rather than listed. Five questions stacked one under another ran past the height of a
   screen, which turned a conversation — the one thing on this page that is supposed to feel alive —
   into a wall to scroll through. So one exchange is on stage at a time and the rest wait behind it.

   All of this hangs off .is-playing, which the script adds. Without scripting the list stays a plain
   flow list and the whole transcript is readable: the conversation is content, not decoration, and it
   may not depend on JavaScript to exist. */
.art-soul-exchange.is-playing {
    position: relative;
    /* Held open to the tallest exchange, so the section does not change height as the answers change
       length. Measured by the script, which knows what the longest one actually is. */
    min-height: var(--soul-stage-height, 16rem);
}

/* The count of exchanges, and the clock on the one now playing. Both are drawn only while the script
   is playing: with no scripting the whole transcript is on the page and there is nothing to count. */
.art-soul-progress,
.art-soul-bar {
    display: none;
}

.art-soul-dialogue.is-playing .art-soul-progress {
    display: flex;
    gap: .55rem;
    align-items: center;
    margin-top: clamp(1.6rem, 3vw, 2.2rem);
}

    .art-soul-progress i {
        width: .38rem;
        height: .38rem;
        border-radius: 50%;
        background: var(--hairline-strong);
        transition: background-color var(--motion-quick) var(--ease-house);
    }

    .art-soul-progress i.is-current {
        background: var(--gold);
    }

/* The panel's own bottom edge, counting down to the next question. The panel is already positioned,
   so this sits exactly on its border rather than near it. */
.art-soul-dialogue.is-playing .art-soul-bar {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    overflow: hidden;
    background: var(--hairline);
}

    .art-soul-bar i {
        display: block;
        height: 100%;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: left center;
    }

    /* The travel belongs to the running state alone, so taking the class off puts the bar back at
       once — the same arrangement the growth section's clock uses, and for the same reason: a bar
       left where it stopped would be counting towards a moment that had already passed. */
    .art-soul-bar.is-running i {
        transform: scaleX(1);
        transition: transform var(--soul-interval, 6000ms) linear;
    }

    .art-soul-exchange.is-playing .art-soul-exchange-item {
        position: absolute;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity .55s ease;
    }

    .art-soul-exchange.is-playing .art-soul-exchange-item.is-current {
        opacity: 1;
        visibility: visible;
    }

/* The answer types itself. The characters are all in the markup before anything moves — the script
   only wraps them — so a screen reader is handed the finished sentence and never a stutter. */
.art-soul-char {
    opacity: 0;
}

    .art-soul-char.is-typed {
        opacity: 1;
    }

/* Nothing types itself for a visitor who asked for less movement: the script leaves the list alone,
   which is the same plain transcript that a browser without scripting gets. */

.art-soul-turn-who {
    display: block;
    margin-bottom: .5rem;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-mono);
    font-size: .56rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.art-soul-turn p {
    margin: 0;
}

.art-soul-turn--guest p {
    color: var(--text-muted);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.7;
}

.art-soul-turn--work {
    padding-left: clamp(1rem, 2vw, 1.6rem);
    border-left: 1px solid var(--hairline);
}

    .art-soul-turn--work p {
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.25rem, 1.9vw, 1.7rem);
        font-style: italic;
        font-weight: 300;
        letter-spacing: -.015em;
        line-height: 1.45;
    }

/* Said out loud, because the exchange above is ours and not a recording. */
.art-soul-dialogue-note {
    margin: clamp(1.8rem, 3vw, 2.4rem) 0 clamp(1.8rem, 3vw, 2.4rem);
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 300;
    line-height: 1.7;
}

/* No bordered chips („piszesz do dzieła", „rozmawiasz głosem") and no second note under them on either page
   that shows this section: they look like controls and are not, and they say what the note beside them
   already says. One sentence closes the exchange. */

.art-soul-chapters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(5rem, 10vw, 10rem) !important;
    border-top: 1px solid var(--hairline);
}

.art-soul-chapter {
    min-height: 22rem;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem) 0;
    border-right: 1px solid var(--hairline);
}

    .art-soul-chapter:first-child {
        padding-left: 0;
    }

    .art-soul-chapter:last-child {
        border-right: 0;
        padding-right: 0;
    }

    .art-soul-chapter > span {
        color: rgba(245, 245, 245, .5);
        font-family: var(--font-mono);
        font-weight: 400;
        font-size: .65rem;
        letter-spacing: 8px;
        --tm-tracking: 8px;
        text-transform: uppercase;
        opacity: .9;
    }

    .art-soul-chapter h3 {
        margin: .9rem 0 1.3rem;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.7rem, 2.5vw, 2.7rem);
        font-weight: 300;
        letter-spacing: -.025em;
    }

    .art-soul-chapter p {
        margin: 0;
        color: var(--white-soft);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.8;
    }

@media (max-width: 900px) {
    .art-soul-experience {
        grid-template-columns: 1fr;
    }

    .art-soul-heading p {
        max-width: 44rem;
    }

    .art-soul-artwork {
        width: min(86vw, 38rem);
        margin-inline: auto;
    }

    .art-soul-signal {
        right: 8%;
    }

    .art-soul-chapters {
        grid-template-columns: 1fr;
    }

    .art-soul-chapter,
    .art-soul-chapter:first-child,
    .art-soul-chapter:last-child {
        min-height: 0;
        padding: 2.5rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--hairline);
    }

        .art-soul-chapter:last-child {
            border-bottom: 0;
        }

        .art-soul-chapter h3 {
            margin-top: 1.5rem;
        }
}

@media (prefers-reduced-motion: reduce) {
    .art-soul-signal span,
    .art-soul-dialogue-head i {
        animation: none;
    }

    /* The exchange still arrives, it just arrives all at once — the script does not stage it and every
       character is already typed. */
    .art-soul-char {
        opacity: 1;
    }
}
/* #endregion */

/* #region Frame & Artwork */
.art-object {
    position: relative;
    overflow: hidden;
    padding: var(--section-space) 0;
    border-bottom: 1px solid var(--section-divider);
    background: var(--surface-editorial);
}

    .art-object::before {
        position: absolute;
        top: 15%;
        left: 42%;
        width: min(62vw, 64rem);
        aspect-ratio: 1;
        border: 1px solid var(--hairline-faint);
        content: "";
        pointer-events: none;
        transform: rotate(45deg);
    }

.art-object-intro,
.art-object-stage,
.art-mini-work {
    width: min(90vw, var(--section-content-max));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

.art-object-intro {
    position: relative;
    z-index: 2;
    max-width: var(--section-content-max);
    margin-bottom: clamp(5rem, 9vw, 9rem);
}

    .art-object-intro h2,
    .art-mini-work-heading h2 {
        max-width: 14ch;
        margin: 1.5rem 0 2rem;
        color: var(--white);
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        letter-spacing: -.04em;
        line-height: var(--section-title-line-height);
    }

        .art-object-intro h2 i,
        .art-mini-work-heading h2 i,
        .art-object-lead h3 i {
            color: var(--gold);
            font-weight: 300;
        }

    .art-object-intro > p,
    .art-mini-work-heading > p {
        max-width: 48rem;
        margin: 0;
        color: var(--white-soft);
        font-size: clamp(1rem, 1.15vw, 1.12rem);
        font-weight: 300;
        line-height: 1.85;
    }

.art-mini-work-heading > p {
    margin-top: var(--section-lead-gap);
}

/* The photograph starts where the copy starts: its top edge on the same line as the rule over
   „Rzemiosło". Centred in the row it floats against a column of text that begins with a hairline, so nothing
   in the composition agrees with anything else. The two
   columns are different heights on purpose, and a shared top line is what makes that read as a
   layout rather than as a picture dropped beside a list. */
.art-object-stage {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: start;
    gap: clamp(4rem, 8vw, 10rem);
    grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
}

.art-object-visual {
    position: relative;
    aspect-ratio: 1;
    margin: 0;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 1s ease, transform 1.2s var(--ease-house);
}

    .art-object-visual.visible {
        opacity: 1;
        transform: none;
    }

/* A PHOTOGRAPH WITH AN INNER FRAME, not a picture staged in three dimensions. The photograph fills its
   square and carries a passe-partout: a hairline set in from the edge, the same frame-inside-a-frame the
   oak model draws and the one the places gallery on Lens uses. The house has one way of framing a
   picture, and this is it — gold outlines offset behind the image, or the image pulled off the right and
   bottom edges under a deep shadow, pretend at depth on a page whose actual 3D object is the oak frame
   two sections up. */
.art-object-photo-shell {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    /* No drop shadow either. A shadow under a picture is the other half of „staged in depth" — it says the
       print is lifted off the page — and with no offsets behind it, it is a cue pretending to space on its
       own. The photograph sits IN the page and the hairline inside it is the frame. */
    background: #050505;
}

    .art-object-photo-shell::before {
        position: absolute;
        z-index: 1;
        border: 1px solid var(--photo-frame);
        content: "";
        inset: clamp(10px, 1.6vw, 22px);
        pointer-events: none;
        transition: border-color var(--motion) var(--ease-house), inset var(--motion) var(--ease-house);
    }

    /* Under the hand the mount closes towards the edge and warms, and the photograph lifts. */
    .art-object-visual:hover .art-object-photo-shell::before {
        border-color: var(--photo-frame-hover);
        inset: clamp(7px, 1.2vw, 16px);
    }

    .art-object-photo-shell::after,
    .art-mini-work-photo-shell::after {
        position: absolute;
        inset: 0;
        border: 1px solid rgba(245, 245, 245, .12);
        box-shadow: inset 0 0 0 1px rgba(5, 5, 5, .3);
        content: "";
        pointer-events: none;
    }

.art-object-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--photo-at-rest);
    transition: filter var(--motion-slow) var(--ease-house);
}

.art-object-visual:hover .art-object-photo {
    filter: var(--photo-lifted);
}

    /* The object photograph carries no caption any more — the section's heading and its first two
       points already say „lity dąb" and „ręcznie wykonana". What is left here is the mini-work
       caption's own eyebrow, trimmed to the two declarations this rule actually contributes: the
       colour, the size and the tracking come from `.art-mini-work-caption > span` further down,
       which has equal specificity and stands later. */
    .art-mini-work-caption span {
        display: block;
        margin-bottom: .65rem;
    }

.art-object-story {
    display: grid;
    gap: clamp(3rem, 6vw, 6rem);
}

.art-object-lead {
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}

.art-mini-work-details article > span,
.art-mini-work-caption > span {
    color: rgba(245, 245, 245, .5);
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.art-object-lead h3 {
    margin: 1.1rem 0 1.25rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.6vw, 3rem);
    font-weight: 300;
    letter-spacing: -.025em;
    line-height: 1.08;
}

.art-object-lead p,
.art-mini-work-details p {
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
}

.art-object-facts {
    display: grid;
    gap: .1rem;
}

    .art-object-facts span {
        position: relative;
        padding: .5rem 1rem .5rem 2.25rem;
        border-bottom: 1px solid var(--line);
        color: var(--text-muted);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.8;
    }

        .art-object-facts span::before {
            position: absolute;
            top: 50%;
            left: .35rem;
            width: .45rem;
            aspect-ratio: 1;
            border: 1px solid var(--gold);
            content: "";
            transform: translateY(-50%) rotate(45deg);
        }

/* The seam between the frame and the work it holds is an ordinary division of sections, so it runs
   from edge to edge like every other one. Drawn on the grid itself it stopped at the content
   column, which read as a rule belonging to the text rather than as the start of a new chapter. */
.art-mini-work-band {
    margin-top: clamp(8rem, 13vw, 13rem);
    padding-top: clamp(6rem, 9vw, 9rem);
    border-top: 1px solid var(--hairline);
}

.art-mini-work {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(3rem, 6vw, 7rem) clamp(1.5rem, 3vw, 3.5rem);
    align-items: start;
}

.art-mini-work-heading {
    grid-column: 1 / span 6;
}

.art-mini-work-specimen {
    position: relative;
    grid-column: 8 / -1;
    aspect-ratio: 1;
    margin: 0;
}

    .art-mini-work-specimen::before {
        position: absolute;
        inset: 8% -5% -5% 8%;
        border: 1px solid var(--hairline-mid);
        content: "";
        transition: border-color var(--motion) var(--ease-house);
    }

    /* The offset frame warms under the hand and the sheet lifts. */
    .art-mini-work-specimen:hover::before {
        border-color: var(--photo-frame-hover);
    }

.art-mini-work-photo-shell {
    position: absolute;
    inset: 0 8% 8% 0;
    overflow: hidden;
    background: #050505;
    box-shadow: 0 3rem 7rem rgba(5, 5, 5, .58);
}

.art-mini-work-sheet {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--photo-at-rest);
    transition: filter var(--motion-slow) var(--ease-house);
}

.art-mini-work-specimen:hover .art-mini-work-sheet {
    filter: var(--photo-lifted);
}

.art-mini-work-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: min(78%, 22rem);
    padding: 1.4rem 1.6rem;
    border-top: 1px solid var(--hairline);
    background: rgba(5, 5, 5, .94);
    box-shadow: 0 1.5rem 3rem rgba(5, 5, 5, .35);
}

    .art-mini-work-caption strong {
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1rem, 1.4vw, 1.35rem);
        font-weight: 300;
        line-height: 1.25;
        text-align: left;
    }

/* One rule, above. The bottom one closed the four columns into a box in the middle of a section
   that has no other frame, and it fell a hair above the section's own end — two lines saying the
   same thing. */
.art-mini-work-details {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(1rem, 2.5vw, 2.5rem);
    border-top: 1px solid var(--line);
}

    .art-mini-work-details article {
        min-height: 22rem;
        padding: clamp(2rem, 3.5vw, 3.5rem);
        border-right: 1px solid var(--line);
    }

        .art-mini-work-details article:last-child {
            border-right: 0;
        }

    .art-mini-work-details h3 {
        margin: 1.75rem 0 1.5rem;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.4rem, 1.8vw, 1.9rem);
        font-weight: 300;
        line-height: 1.15;
    }

.patronage-section {
    position: relative;
    overflow: hidden;
    background: var(--surface-editorial);
}

/* #endregion */

/* #region Patronage */
.mec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;
    align-items: center;
    max-width: none;
    margin: 0 auto;
}

.mec-box {
    padding: clamp(2.5rem, 5vw, 5rem);
    background: linear-gradient(145deg, var(--tint), transparent 55%), var(--surface-card);
    border: 1px solid var(--hairline-mid);
    position: relative;
    overflow: hidden;
}

    /* The watermark figure comes from the view, which reads it off ProductCatalog — never a literal '20%'
       written into a stylesheet, where neither the catalogue nor a translation can reach it. A number the
       house promises in a contract must have exactly one source. */
    .mec-box::before {
        content: var(--art-share, '20%');
        position: absolute;
        top: -15px;
        right: -10px;
        font-family: var(--font-display);
        font-size: 12rem;
        font-weight: 300;
        color: var(--tint);
        line-height: 1;
        z-index: 0;
        pointer-events: none;
    }

    .mec-box h3 {
        font-family: var(--font-display);
        font-size: clamp(1.6rem, 7vw, 2.2rem);
        color: var(--white);
        font-weight: 400;
        margin-bottom: 2vh;
        position: relative;
        z-index: 1;
    }

    /* The one paragraph that states what a patron's money actually does, so it is set to be read:
       light, at full strength. The share inside it is the box's one gold. */
    .mec-box p {
        font-size: 1.05rem;
        font-weight: 300;
        color: var(--white-soft);
        line-height: 1.8;
        position: relative;
        z-index: 1;
    }

        /* The share itself, and the one thing in this box a reader has to leave with: gold and a
           weight heavier than the sentence around it. The paragraph is deliberately light — see
           above — so the figure carries the emphasis alone rather than the whole line shouting. */
        .mec-box p strong {
            color: var(--gold);
            font-weight: 500;
        }

/* #endregion */

/* #region Catalog */
.marquee-section {
    overflow: hidden;
}

.marquee-header {
    width: min(90vw, var(--hero-content-max));
    margin-inline: auto;
}

/* The wall. Three rows of the catalogue, each drifting on its own and each answering the scroll —
   see the view for why three and why none of them is tilted.

   The air above it is the shared header gap plus a measure of its own, and the addition is not a
   fudge: --section-head-gap is set for content that opens with something light — a heading, a grid
   of cards with padding of their own. This block opens with a hard edge of photographs running the
   full width of the page, so at the shared distance alone the lead paragraph reads as a caption
   sitting on the wall rather than as the section's own opening line. */
.artist-wall {
    /* One distance between cards, across and down, and the loop's own arithmetic reads it too — so
       it is a variable rather than a number written in three places that would drift apart. */
    --wall-gap: clamp(14px, 1.6vw, 26px);
    /* One height for every card in the wall; the widths vary off it. It can be this generous because the card
       carries no caption under it: the works are half as big again for barely any extra section height. */
    --wall-card-height: clamp(240px, 26vw, 420px);
    /* How far each row starts to the left of the page. The scroll pushes a row either way, and a
       row that begins flush with the left edge opens a hole there the moment it is pushed right —
       so every row begins outside the page by more than art.js can ever move it. The scroll is now
       the only thing that moves these rows, so it has to move them a long way to be felt at all:
       art.js travels up to 760px over the wall's whole pass, half of it to each side, and this
       clears that with room to spare. */
    --wall-overhang: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--wall-gap);
    /* The shared header measure PLUS air of its own, and it has to be written as that sum. Adjacent
       siblings' margins collapse to the larger of the two, so a plain 1.2–2rem here is smaller than
       --section-head-gap and adds nothing at all — the lead paragraph then sits on the wall. */
    margin-top: calc(var(--section-head-gap) + clamp(1.6rem, 3.2vh, 2.8rem));
}

/* The row carries what the scroll does to it, and nothing else. There is no drift of its own any
   more and no wrapper for one: a strip that slides at a constant speed whatever the reader does is
   a screensaver, and the wall reads as a place rather than a display when it moves only because the
   reader moved. The rows are wide enough that the cards inside them never need to loop. */
.artist-wall-row {
    display: flex;
    width: max-content;
    gap: var(--wall-gap);
    margin-left: calc(-1 * var(--wall-overhang));
    transform: translate3d(var(--wall-shift, 0px), 0, 0);
    will-change: transform;
}

/* Each row starts somewhere else. The cards are all one width, so three rows begun at the same
   place put their edges in a column and the wall reads as a table of photographs — which is the
   one thing a wall of separate works must not look like. */
.artist-wall-row:nth-child(2) {
    margin-left: calc(-1 * var(--wall-overhang) - 7vw);
}

.artist-wall-row:nth-child(3) {
    margin-left: calc(-1 * var(--wall-overhang) - 3vw);
}

/* The work is the card. Nothing stands under it and nothing is laid over it until the cursor asks.

   Never a photograph with a round portrait hung off its bottom edge and two lines of type below that — that
   is the shape of a profile card, not of a gallery. Three rows of it read as a directory of people, and the
   artwork shrinks to make room for the caption: the page is
   showing us the artists' details when what makes anybody click is the work.

   Every card is square, and that is not negotiable: the house's whole visual system is 1:1 and a
   work cropped to a letterbox is a work we have altered.

   Every card is also the SAME square. Giving every third card 78% and every fifth 88%, hung low or centred,
   breaks the rhythm of a comb at the price of a wall of works at three sizes, where the smaller ones read as
   the less important ones. A gallery hangs its works with one measure between them and does not rank them by
   scale, so that irregularity costs the thing on show. It comes from where each row STARTS
   instead: the three rows begin at different points, so the edges never line up into a table.

   One measure, and it is the same across and down — .artist-wall and .artist-wall-row both take
   --wall-gap, and with the cards all one height a row is exactly as tall as a card, so the distance
   between two works is the same figure whichever way the reader looks. */
.artist-card {
    position: relative;
    display: block;
    width: var(--wall-card-height);
    height: var(--wall-card-height);
    align-self: flex-start;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--hairline);
    opacity: .9;
    text-decoration: none;
    transition: opacity var(--motion-quick) var(--ease-house), border-color var(--motion) var(--ease-house);
}

.ac-artwork {
    width: 100%;
    height: 100%;
    background-color: var(--surface-raised);
    background-position: center;
    background-size: cover;
    filter: var(--photo-at-rest);
    transform: scale(1.02);
    transition: filter var(--motion-slow) var(--ease-house), transform 1.8s var(--ease-house);
}

/* WHO MADE IT — the whole card, not a strip along its foot. The face covers the work, so the type
   on it is legible whatever the painting underneath is doing. A band along the foot puts two lines of
   text straight onto the picture and loses them on anything busy. */
.ac-reveal {
    position: absolute;
    display: flex;
    align-items: flex-end;
    padding: clamp(.9rem, 1.6vw, 1.3rem);
    inset: 0;
    opacity: 0;
    transition: opacity var(--motion-quick) var(--ease-house);
}

    /* The portrait, and a scrim over it: a photograph is not a background for type until something
       darkens it, and these are somebody's own portraits, taken in whatever light they had. */
    .ac-face {
        position: absolute;
        background-position: center;
        background-size: cover;
        inset: 0;
    }

        .ac-face::after {
            content: "";
            position: absolute;
            background: linear-gradient(180deg, rgba(5, 5, 5, .25) 30%, rgba(5, 5, 5, .9));
            inset: 0;
        }

/* The flag sits on the portrait's top corner, over the scrim like the type. The shadow is what keeps
   it visible on a light photograph — a flag is the one element here that can land on anything. */
.ac-flag {
    position: absolute;
    top: clamp(.9rem, 1.6vw, 1.3rem);
    right: clamp(.9rem, 1.6vw, 1.3rem);
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 2px 6px rgba(5, 5, 5, .85));
}

/* Over the scrim, not under it. */
.ac-info {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.ac-name {
    overflow: hidden;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The work's title, not the country. A visitor looking at a painting asks what it is called before they
   ask which country it came from — and the country is on the artist's own page, in the catalogue's cards
   and in the fact table. */
.ac-work {
    overflow: hidden;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The wall answers the cursor. One work comes forward and every other work in its row steps back —
   which is the whole difference between a strip that is being looked at and one that is merely
   playing. It comes forward in light, not in height: the frame warms and the others dim. */
.artist-card:hover,
.artist-card:focus-visible {
    z-index: 2;
    border-color: var(--photo-frame-hover);
    opacity: 1;
}

    /* The work goes dark rather than bright: the picture is being handed over, not shown off. The
       darkening is also what keeps the card readable if an artist has no portrait on file — the face
       then fades in carrying nothing but the scrim, and the name still stands on near-black. */
    .artist-card:hover .ac-artwork,
    .artist-card:focus-visible .ac-artwork {
        filter: brightness(.16) var(--photo-grade);
        transform: scale(1.025);
    }

    .artist-card:hover .ac-work,
    .artist-card:focus-visible .ac-work {
        color: var(--gold);
    }

    .artist-card:hover .ac-reveal,
    .artist-card:focus-visible .ac-reveal {
        opacity: 1;
    }

.artist-wall-row:has(.artist-card:hover) .artist-card:not(:hover) {
    opacity: .42;
}

/* Nothing to hover with: the names are simply there, on the works — but the PORTRAIT is not, because
   a face covering every card would hide the whole wall on a phone. The face keeps its scrim, so the
   type stays legible, and the work stays visible under it. */
@media (hover: none) {
    .ac-reveal {
        align-items: flex-end;
        background: linear-gradient(180deg, transparent 45%, rgba(5, 5, 5, .9));
        opacity: 1;
    }

    .ac-face {
        display: none;
    }
}

.catalog-btn-wrapper {
    text-align: center;
    margin-top: 10vh;
}

/* The second door out of this section — the one an artist takes. It stays secondary to „Odkryj pełny
   katalog" by weight and colour, never by being unreadable: 9px of muted mono at .55 opacity under a
   bordered button is a link nobody finds, and quiet is not the same as absent. */
.artist-application-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: fit-content;
    margin: 1.4rem auto 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white-soft);
    text-decoration: none;
    transition: color var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house);
}

    .artist-application-link:hover,
    .artist-application-link:focus-visible {
        color: var(--gold);
        border-bottom-color: var(--gold);
    }

.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    border: 1px solid var(--hairline-strong);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    transition: border-color var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house);
}

    /* Gold arrives as a line and a colour, never as a fill. */
    .btn-outline:hover,
    .btn-outline:focus-visible {
        border-color: var(--gold);
        color: var(--gold);
    }

/* #endregion */

/* #region Testimonials */
.art-testimonials .testi-grid {
    gap: clamp(1.5rem, 3vw, 3.5rem);
}

.art-testimonials .testi-card {
    position: relative;
    min-height: clamp(17rem, 23vw, 22rem);
    padding: clamp(1.75rem, 2.6vw, 2.5rem);
    overflow: hidden;
    border: 1px solid var(--hairline-mid);
    background: linear-gradient(145deg, rgba(245, 245, 245, .045), transparent 45%), rgba(245, 245, 245, .012);
    transition: border-color var(--motion) var(--ease-house), background-color var(--motion) var(--ease-house);
}

    /* The whole card opens the artist, so the link is a layer over it rather than a word inside the
       quotation — the same arrangement the catalogue's cards use, and the reason the focus ring sits
       around the card it opens. A card whose artist has no published page carries no layer and is
       simply a quotation. */
    .art-testimonials .testi-link {
        position: absolute;
        z-index: 2;
        inset: 0;
    }

        .art-testimonials .testi-link:focus-visible {
            outline: 1px solid var(--gold);
            outline-offset: -4px;
        }

    /* A card that opens an artist takes the gold; a plain quotation only brightens its hairline. */
    .art-testimonials .testi-card.is-linked:hover {
        border-color: var(--gold-hover);
    }

    .art-testimonials .testi-card::after {
        content: "";
        position: absolute;
        right: -3rem;
        bottom: -3rem;
        width: 9rem;
        aspect-ratio: 1;
        border: 1px solid var(--hairline);
        transform: rotate(45deg);
        pointer-events: none;
    }

    .art-testimonials .testi-card:hover {
        border-color: var(--hairline-strong);
        background-color: var(--tint);
    }

.art-testimonials .testi-quote {
    margin-bottom: clamp(1.5rem, 2.6vh, 2.25rem);
}

.art-testimonials .testi-signature {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    margin-top: auto;
}

.art-testimonials .testi-flag {
    position: relative;
    flex: 0 0 auto;
    width: clamp(3.75rem, 5vw, 4.5rem);
    aspect-ratio: 1;
    padding: 5px;
    border: 1px solid var(--hairline-strong);
    background: #050505;
    box-shadow: 0 18px 36px rgba(5, 5, 5, .35);
    opacity: .82;
}

    .art-testimonials .testi-flag img {
        filter: saturate(.55) brightness(.72) contrast(.94);
    }

    /* The flag comes up a little when the card is under the cursor — the country of the person who
       is speaking, answering the attention. Deliberately slight: a flag at full strength beside a
       quotation is the loudest thing on a page that is meant to be read. */
    .art-testimonials .testi-flag,
    .art-testimonials .testi-flag img {
        transition: opacity var(--motion) var(--ease-house), filter var(--motion) var(--ease-house);
    }

    .art-testimonials .testi-card:hover .testi-flag {
        opacity: .93;
    }

        .art-testimonials .testi-card:hover .testi-flag svg {
            filter: saturate(.68) brightness(.85) contrast(.95);
        }

    .art-testimonials .testi-flag::before {
        content: "";
        position: absolute;
        inset: 4px -6px -6px 4px;
        z-index: -1;
        border-right: 1px solid var(--hairline-strong);
        border-bottom: 1px solid var(--hairline-strong);
    }

    .art-testimonials .testi-flag img {
        display: block;
        width: 100%;
        height: 100%;
    }

.art-testimonials .testi-person {
    min-width: 0;
}

.art-testimonials .testi-author {
    line-height: 1.6;
}

@media (max-width: 1000px) {
    .art-testimonials .testi-card {
        min-height: 0;
    }
}

@media (max-width: 600px) {
    .art-testimonials .testi-card {
        padding: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .art-testimonials .testi-card {
        transition: none;
    }
}
/* #endregion */

/* #region Cases */
.art-use-cases .b2b-grid {
    gap: clamp(1.5rem, 3vw, 3rem);
}

.art-use-cases .b2b-card {
    min-height: 0;
    padding: 0 0 clamp(2rem, 3vw, 3rem);
    overflow: hidden;
}

.art-use-cases .b2b-img-box {
    aspect-ratio: 4 / 5;
    margin: 0 0 clamp(2rem, 3vw, 3rem);
    border: 0;
    border-bottom: 1px solid var(--hairline);
}

    /* No exposure of its own. Restating .b2b-img one step lighter than the same class carries on every
       other page makes an identical card read as two photographs depending where it stands, so the
       treatment comes from product.css alone. */

    /* One photograph per use case, fixed with the copy it illustrates. */
    .art-use-cases .b2b-img.is-equipment {
        background-image: url('/img/art/case-equipment.webp');
    }

    .art-use-cases .b2b-img.is-gift {
        background-image: url('/img/art/case-gift.webp');
    }

    .art-use-cases .b2b-img.is-event {
        background-image: url('/img/art/case-event.webp');
    }

.art-use-cases .b2b-title,
.art-use-cases .b2b-text {
    margin-inline: clamp(2rem, 3vw, 3rem);
}

.art-use-cases .b2b-title {
    font-size: clamp(1.8rem, 2.3vw, 2.6rem);
}

@media (max-width: 1000px) {
    .art-use-cases .b2b-grid {
        grid-template-columns: 1fr;
    }

    .art-use-cases .b2b-img-box {
        aspect-ratio: 16 / 10;
    }
}

@media (prefers-reduced-motion: reduce) {
    .art-use-cases .b2b-img {
        transition: none;
    }
}
/* #endregion */

/* #region Responsive */
@media (max-width: 1000px) {
    .art-object-stage {
        grid-template-columns: 1fr;
    }

    .art-object-visual {
        width: min(100%, 44rem);
        margin-inline: auto;
    }

    .art-object-story {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .art-object-facts {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .art-mini-work-heading {
        grid-column: 1 / span 7;
    }

    .art-mini-work-specimen {
        grid-column: 8 / -1;
    }

    .art-mini-work-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .art-mini-work-details article:nth-child(2) {
            border-right: 0;
        }

        .art-mini-work-details article:nth-child(-n+2) {
            border-bottom: 1px solid var(--line);
        }

    .mec-grid {
        grid-template-columns: 1fr;
    }
}

/* Five columns of a phablet are narrower than the caption laid over the photograph, which then hid
   most of it — the numbered corner included. The heading takes the row and the photograph the middle
   eight columns under it. */
@media (min-width: 601px) and (max-width: 760px) {
    .art-mini-work-heading {
        grid-column: 1 / -1;
    }

    .art-mini-work-specimen {
        grid-column: 3 / span 8;
    }
}

@media (max-width: 600px) {
    .art-object-story {
        grid-template-columns: 1fr;
    }

    .art-object-facts {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .art-mini-work {
        grid-template-columns: 1fr;
    }

    .art-mini-work-heading,
    .art-mini-work-specimen,
    .art-mini-work-details {
        grid-column: 1;
    }

    .art-mini-work-specimen {
        width: calc(100% - 1rem);
        margin-bottom: 1rem;
    }

    .art-mini-work-caption {
        width: min(84%, 22rem);
    }

    .art-mini-work-details {
        grid-template-columns: 1fr;
    }

        .art-mini-work-details article,
        .art-mini-work-details article:nth-child(2) {
            min-height: 0;
            border-right: 0;
            border-bottom: 1px solid var(--line);
        }

            .art-mini-work-details article:last-child {
                border-bottom: 0;
            }

        .art-mini-work-details h3 {
            margin-top: 2.5rem;
        }

    .b2b-pricing-box {
        padding: 5vh 5vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .art-object-visual,
    .art-object-photo-shell::before,
    .ac-artwork {
        transition: none;
    }

    .artist-card:hover .ac-artwork,
    .artist-card:focus-visible .ac-artwork {
        transform: scale(1.02);
    }
}
/* #endregion */

/* The assurance box lived here — its promises moved into the shared house terms under every
   pricing section, and the two Art-specific ones into the section's fineprint. */