/* #region Way back */
/* The way out, on both the catalogue and an artist's page, written in the eyebrow's vocabulary with the
   arrow the site's links already use, pointing the other way. Given nothing but a position, the browser
   draws it in its own violet with its own underline — the one link on the page that looks like nothing
   else on the site. */
/* It does not place itself at left: 5vw. That is the masthead's gutter but not the logo's position: the
   header is `padding: 25px 5vw` with a `.container` inside it capped at 1400px, so past a window of
   about 1555px the logo moves inwards and a link pinned to the gutter stays behind. Repeating the
   header's own two boxes here lines the two up at every width. The band takes no clicks; only the link
   inside it does. */
/* In the flow, not fixed to the window: pinned it follows the reader down a long catalogue and sits over
   the cards. The way back belongs at the top of the page, which is where somebody who wants it scrolls
   anyway. The top padding clears the masthead, so the link still starts under the logo. */
.cat-back {
    padding: calc(var(--site-header-h) + clamp(1.4rem, 4vh, 2.4rem)) 5vw 0;
}

.cat-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: .62rem;
    letter-spacing: .2em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--motion-quick) var(--ease-house);
}

    .cat-back-link::before {
        display: inline-block;
        content: "\2190";
        font-size: .85rem;
        letter-spacing: 0;
        transition: transform var(--motion-quick) var(--ease-house);
    }

    .cat-back-link:hover,
    .cat-back-link:focus-visible {
        color: var(--gold);
    }

        .cat-back-link:hover::before,
        .cat-back-link:focus-visible::before {
            transform: translateX(-5px);
        }
/* #endregion */

/* #region Catalogue */
/* The catalogue is a page, not a machine. A full-screen gallery takes the wheel away from the browser:
   one artist at a time, each slide addressed by a fragment, `body` locked so nothing below can be
   reached — which means the footer, Odoardo Letters™ and the knowledge block never appear although the
   layout renders all three. Below 900px such a machine has to be switched off anyway and the slides
   become an ordinary scrolling list, so the site was
   maintaining two behaviours and the phone already had the better one.
   What is left is that one: a grid of cards, read the way every other listing here is read. */
/* The masthead is cleared by .cat-back above, which now stands in the flow, so this only has to set
   the distance from the way back to the heading. */
/* The foot is the house's own head-to-content measure, not a value of its own: what follows is a
   grid of photographs running the full width, and the 2.6–4rem that stood here left the lead
   paragraph sitting on the first row of works rather than opening the page. The head keeps its own
   distance from the masthead band above it. */
.cat-intro {
    padding: clamp(2.4rem, 6vh, 4rem) 5vw calc(var(--section-head-gap) + clamp(1rem, 2vh, 1.8rem));
}

/* The lead is held to a measure. .h-desc is written for a hero, where the column beside the picture
   already narrows it; here it would run the full 1400px of the container. `margin-inline: 0` is the
   other half of that: .h-desc centres itself with `margin: 0 auto`, which is right under a centred
   hero and wrong here — the measure then sat centred in the container while the heading above it
   started at the container's left edge, so the two never lined up whatever the width. */
.cat-intro-copy .h-desc {
    max-width: 62ch;
    margin-inline: 0;
}

.cat-list {
    padding: 0 5vw clamp(4rem, 9vh, 7rem);
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: clamp(1.6rem, 2.6vw, 2.6rem);
}

/* Positioned so the one action can cover it — see .cat-card-profile::after. */
.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--surface-card);
    transition: border-color var(--motion) var(--ease-house);
}

    /* The hairline brightens; the gold goes to the card's one action below. */
    .cat-card:hover {
        border-color: var(--hairline-strong);
    }

/* The square the whole house is built on. */
.cat-card-work {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #050505;
}

    .cat-card-work img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Held back until the card is approached, the way the journal's tiles behave — the page is a
           list of many works, and twenty of them at full saturation is a contact sheet, not a catalogue. */
        filter: var(--photo-at-rest);
        transform: scale(1.01);
        transition: transform 1.8s var(--ease-house), filter var(--motion-slow) var(--ease-house);
    }

.cat-card:hover .cat-card-work img {
    filter: var(--photo-lifted);
    transform: scale(1.025);
}

.cat-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(1.3rem, 2vw, 1.8rem);
}

.cat-card-head {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

/* The face climbs onto the bottom edge of the work above it, the way a portrait sits on a spread —
   which is what makes a grid of these read as a catalogue of people rather than a grid of pictures.
   The ground behind it is the card's own, so it cuts the work cleanly without a ring being drawn:
   the card's border is still the only frame this page draws. */
.cat-card-portrait {
    flex: none;
    position: relative;
    width: 66px;
    aspect-ratio: 1;
    margin-top: calc(-33px - clamp(1.3rem, 2vw, 1.8rem));
    overflow: hidden;
    border-radius: 50%;
    outline: 5px solid var(--surface-card);
    background: #050505;
}

    .cat-card-portrait img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.cat-card-name {
    margin: 0;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
    font-weight: 300;
    line-height: 1.2;
}

.cat-card-country {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .45rem;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

    .cat-card-country img {
        flex: none;
        width: 16px;
        height: 16px;
        border: 1px solid var(--line);
        border-radius: 2px;
    }

.cat-card-title {
    margin: 1.3rem 0 0;
    color: var(--white-soft);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.4;
}

.cat-card-bio {
    /* Clamped rather than trimmed in C#: the whole biography stays in the markup for whoever reads
       the page with a screen reader or a stylesheet of their own, and the artist's own page prints
       it in full. The card only promises the opening of it. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    margin: .9rem 0 0;
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 300;
    line-height: 1.7;
}

/* Pinned to the foot of the card, so a short biography and a long one still end in the same place. */
.cat-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem 1.6rem;
    margin-top: auto;
    padding-top: clamp(1.2rem, 2vw, 1.7rem);
}

/* The card's one action, and the card's whole surface: ::after covers the article, so the work, the
   portrait, the name and the note all open the artist — which is what a visitor tries first. The
   word stays visible because a picture that is a link has to say where it goes. */
/* The house's own forward link, in the house's own metrics — the same shape .ep-cta draws on the
   product pages: white capitals over a hairline, the arrow as its own element, and the gold arriving
   in the line and the arrow under the cursor. At .58rem with no arrow the one action on the card reads
   as a caption rather than as a link, and is the odd one out on a site where every „go on" looks alike. */
.cat-card-profile {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--hairline-strong);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: clamp(.65rem, .8vw, .78rem);
    letter-spacing: .22em;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color var(--motion) var(--ease-house);
}

    .cat-card-profile > span {
        display: inline-block;
        margin-left: .8rem;
        transition: transform var(--motion) var(--ease-house) .06s, color var(--motion) var(--ease-house);
    }

    .cat-card:hover .cat-card-profile > span,
    .cat-card-profile:focus-visible > span {
        color: var(--gold);
        transform: translateX(4px);
    }

    .cat-card-profile::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .cat-card:hover .cat-card-profile,
    .cat-card-profile:focus-visible {
        border-color: var(--gold);
    }

    /* The keyboard ring belongs to the card, not to two words at its foot — the link is the card. */
    .cat-card:has(.cat-card-profile:focus-visible) {
        border-color: var(--gold);
        outline: 1px solid var(--gold);
        outline-offset: 3px;
    }

    .cat-card-profile:focus-visible {
        outline: none;
    }

/* #endregion */

/* #region Artist page */
/* The page an artist shares, and the one page of ours a stranger is most likely to arrive at first.
   So it opens with the work already hanging in the house's oak moulding, lit the way a gallery
   lights a wall: the picture is the only thing on that screen that argues for itself, and everything
   under it answers, in order, the three questions that follow — who made it, what arrives, how to have
   it. Not a centred column of portrait, name and picture: that reads as a directory entry — correct, and
   asking nobody for anything. */
.artist-page {
    overflow-x: clip;
}

.artist-hero {
    position: relative;
    /* The head stays shorter than a section's: the band with the way back sits directly above and a
       hero opens under it rather than after a gap. The foot is the house measure, so what follows
       stands as far from the hero as every other band stands from the one before it. */
    padding: clamp(2.5rem, 6vh, 4.5rem) 0 var(--section-space);
}

/* The wall light. It sits behind the frame and touches nothing else, so the work is the brightest
   thing on the screen without a pixel of the work itself being altered. */
.artist-hero-light {
    position: absolute;
    top: -12%;
    left: 50%;
    width: min(120vw, 1500px);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 42%, var(--tint-raised), var(--tint) 38%, transparent 66%);
    pointer-events: none;
}

/* The house's measure for all four bands of this page: .container alone carries no side gutter. */
.artist-hero-inner,
.artist-about-inner,
.artist-included > .container,
.artist-close > .container {
    width: min(90vw, var(--section-content-max));
    max-width: none;
    margin-inline: auto;
}

/* The gap is wider than a layout gap needs to be, and deliberately: this is a hung picture with a
   wall label beside it, and a label crowding the moulding reads as part of the work. */
.artist-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 9rem);
    /* The columns want that much air between them; the rows want a measure of their own. The work's
       name sits in a second row under both of them, and at the column measure it stood up to nine
       rem below the frame — which is a gap, not a relationship. This is the distance from the frame
       and the button down to the hairline over the name. */
    row-gap: clamp(1.6rem, 3vw, 2.6rem);
}

/* Three items, two rows: the frame and the copy share the first, and the work's name runs under both
   in the second. Placed explicitly, because the name spans the whole box and auto-placement would
   read that span as a reason to move the copy down a row. */
.artist-hero-exhibit {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

/* A grid item's floor is its content, so a long unbroken name would push this column wider than its
   track and take the picture's width with it. */
.artist-hero-copy {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

/* The hero holds the house's oak MODEL — built in 3D in product.css, swaying and leaning towards the
   pointer — and not a flat square: a border-image tilted a degree with a light-up animation on the
   picture inside it is a second frame. One frame, described once, and it is the model.

   The plate takes the whole column here, unlike beside the price, where it is a guest in a column of
   its own width: on this page the object IS the first screen, and its own 460px cap would have left
   it small and centred with the pointer area only over part of the exhibit. */
.artist-hero-exhibit .oak-frame-plate {
    width: 100%;
    max-width: none;
}

/* The plate under a hung work, saying the two things a real one says. */
/* SMALL TYPE OVER A HUGE WATERMARK, and no box of any kind. What carries it is scale, not material: the
   label and the title stay quiet, and the title is set again behind them at a breath of white, far
   larger than the column and cropped by its edge. It is the treatment the „Gdzie to umieścić?" tiles use
   for their numerals — the house's one way of making a word into a texture — and it costs the layout
   nothing, because the watermark is out of flow. The hairline above attaches the label to the frame the
   way a section attaches to the one before it.

   Two tempting alternatives are both wrong, in opposite directions: a plain caption behind a gold rule is
   how a photograph gets a credit, not how a collected work is named; and a gold-bordered plate with a
   wash and a shadow puts a second framed object directly under the oak one and makes the corner heavy. */
.artist-plate {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: .35rem;
    justify-items: start;
    /* No margin of its own — the row gap above is the distance, and the two together stand the name too
       far under the frame. */
    padding-top: clamp(.9rem, 1.6vw, 1.3rem);
    border-top: 1px solid var(--hairline-mid);
    overflow: hidden;
}

    /* The title as texture: nowrap and cropped, so a long one runs off the edge on purpose instead
       of wrapping into a second line of watermark nobody asked for. */
    .artist-plate-mark {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 0;
        color: var(--tint);
        font-family: var(--font-display);
        /* Large, but sized to the band it stands in rather than to the widest number the house allows:
           the word has to finish at the bottom edge. Pushed under the box by .16em with a line box
           tighter than the letters, the descenders — and half the baseline on a title like „Disappearing
           Landscape" — fall outside the crop. */
        font-size: clamp(3rem, 6vw, 5.5rem);
        font-style: italic;
        font-weight: 400;
        letter-spacing: -.03em;
        /* Tall enough for the LETTERS, not for the em square. Playfair's ascender and descender come
           to about 1.34em together, so at line-height 1 the tail of a „p" — „nubes crepusculares" —
           hangs below the line box and the crop takes it off. At 1.38 the glyphs are wholly inside
           the box, so `bottom: 0` puts the real bottom of the word on the band's edge and nothing is
           cut. Do not tighten this to make the word sit lower: what would move is the clipping. */
        line-height: 1.38;
        pointer-events: none;
        user-select: none;
        white-space: nowrap;
    }

    /* Everything the reader reads stands above the watermark. */
    .artist-plate > :not(.artist-plate-mark) {
        position: relative;
        z-index: 1;
    }

    /* The label carries .h-tag, the site's own eyebrow, so its size and tracking are the ones every
       other eyebrow on the page uses — including „Artystka Odoardo Art™" standing beside it in the
       hero. A bespoke .55rem here is a second, quieter set of numbers for the same kind of label. What it
       must NOT bring with it is the eyebrow's own margin: .h-tag owns the gap to the heading
       under it — clamp(1.2rem, 2.5vh, 2rem), the distance under a section title — and inside a
       two-line label that is a hole. Here the grid's own row gap is the distance. */
    .artist-plate .h-tag {
        margin-bottom: 0;
    }

    .artist-plate strong {
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.35rem, 2.2vw, 1.9rem);
        font-style: italic;
        font-weight: 300;
        line-height: 1.2;
    }

.artist-name {
    margin-bottom: 1.4rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.4vw, 4.6rem);
    font-weight: 300;
    line-height: 1.02;
}

.artist-origin {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 2rem;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .25em;
    text-transform: uppercase;
}

    .artist-origin img {
        width: 20px;
        height: 20px;
        border-radius: 2px;
    }

/* The hero's lead, so it is set at the hero lead's size — the same declaration .h-desc carries on
   every other first screen in the house. At .95rem it is a notch under all of them, which leaves the sentence
   that says what actually arrives reading as a footnote to the name above it. The measure
   and the space under it stay its own: this lead is followed by a button, not by a section. */
.artist-edition {
    max-width: 46ch;
    margin-bottom: clamp(2rem, 4vh, 3rem);
    color: var(--white-soft);
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    font-weight: 300;
    line-height: 1.75;
}

/* The whole point of the page, above the fold and said once. */
.artist-cta {
    display: grid;
    justify-items: start;
    gap: 1rem;
}

    .artist-cta small {
        max-width: 42ch;
        color: var(--white-faint);
        font-size: .76rem;
        line-height: 1.7;
    }

/* THE HOUSE'S SECTION MEASURE, not a smaller one of this page's own. At clamp(4rem, 9vh, 7rem) — against
   the site's --section-space of clamp(6rem, 10vw, 9rem) — the page reads as packed beside every other
   one, and worse on a wide short screen, where a vh measure gives least exactly when a vw measure gives
   most. One token, four bands. */
.artist-about {
    padding: var(--section-space) 0;
    border-top: 1px solid var(--line);
}

/* The portrait stands on the RIGHT, and the text runs to it. Both are placed explicitly: the
   picture comes first in the markup — which is the order one column wants, so a phone gets the face
   before the paragraphs — and grid auto-placement would otherwise read that order as „column one",
   putting the copy underneath instead of beside it. */
.artist-about-inner {
    display: grid;
    align-items: start;
    gap: clamp(2rem, 5vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(17rem, 26vw, 23rem));
}

    .artist-about-copy {
        grid-column: 1;
        grid-row: 1;
    }

/* Square like everything else here, and IN COLOUR from the first frame — never greyscale until the cursor
   arrives. The work carries colour on this page, but the person is half of what the page sells, and a face
   desaturated by default reads as an archive photograph rather than as somebody working today. Bigger for
   the same reason. What the cursor does is bring it forward: the frame takes the gold and the face comes
   a little closer. */
.artist-portrait {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 1;
    margin: 0;
    border: 1px solid var(--hairline-mid);
    overflow: hidden;
    transition: border-color var(--motion) var(--ease-house);
}

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

    .artist-portrait:hover {
        border-color: var(--gold);
    }

        .artist-portrait:hover img {
            filter: var(--photo-lifted);
            transform: scale(1.025);
        }

.artist-about-copy p {
    max-width: 68ch;
    color: var(--white-soft);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.9;
}

/* The soul section is the Art page's, quoted whole — and there it follows a section that draws its
   own foot, so it needs no head of its own. On this page every band states its own top rule
   („o artyście", „co otrzymujesz", the links), so without this the one section borrowed from elsewhere is the
   only one arriving with no line above it. Scoped to this page, because the Art page's rhythm is correct as
   it stands. */
.artist-page .art-soul {
    border-top: 1px solid var(--line);
}

.artist-included {
    padding: var(--section-space) 0;
    border-top: 1px solid var(--line);
}

.artist-included-head {
    margin-bottom: var(--section-head-gap);
}

    /* .h-desc centres itself, which is right under a hero and wrong under a heading that starts at
       the container's left edge. */
    .artist-included-head .h-desc {
        max-width: 62ch;
        margin-inline: 0;
    }

.artist-included-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(1.2rem, 2.4vw, 2.2rem);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* The reveal transition is restated because this rule also has a border to animate, and the
   shorthand would otherwise drop the two properties .reveal-elem transitions. The stagger rides on
   the same property the entrance animations use, so one number describes both idioms. */
.artist-included-item {
    position: relative;
    display: grid;
    align-content: start;
    gap: .7rem;
    padding: clamp(1.4rem, 2.2vw, 2rem);
    border: 1px solid var(--line);
    background: var(--surface-card);
    overflow: hidden;
    transition: opacity 1s ease var(--odo-enter-delay, 0s),
                transform 1s ease var(--odo-enter-delay, 0s),
                border-color var(--motion) var(--ease-house);
}

    .artist-included-item:hover {
        border-color: var(--gold-accent);
    }

        /* The watermark brightens with the card it belongs to — the same two values the segment
           tiles use, so a reader who has seen one recognises the other. */
        .artist-included-item:hover .artist-included-number,
        .artist-included-item:focus-within .artist-included-number {
            color: rgba(var(--gold-rgb), .085);
        }

    /* Everything the reader reads stands above the watermark. */
    .artist-included-item > :not(.artist-included-number) {
        position: relative;
        z-index: 1;
    }

    .artist-included-item h3 {
        color: var(--white);
        font-family: var(--font-display);
        /* THE SEGMENT TILE'S OWN SCALE. These cards took that tile's watermark, so they take its
           type with it — heading and paragraph together, because a scale is a ratio and half of one
           is what made this band feel off: the title had grown to 1.8rem while the sentence under it
           stayed at .85rem, a jump of more than two to one. */
        font-size: clamp(1.3rem, 1.9vw, 1.65rem);
        font-weight: 300;
        line-height: 1.2;
        /* Unbalanced, „Numerowana odbitka Fine Art" breaks to a full line with „Fine Art" alone
           underneath, and a display heading with a two-word orphan on its last line reads as a mistake in
           a house whose typography is part of the product. Balanced, the browser evens the lines for us,
           and it costs nothing on the three titles that fit one line. */
        text-wrap: balance;
    }

    .artist-included-item p {
        color: var(--white-faint);
        font-size: 1.05rem;
        font-weight: 200;
        line-height: 1.8;
    }

/* THE NUMBER IS A WATERMARK, and it is the one the „Gdzie to umieścić?" tiles on the segment pages
   draw — the same declarations, so the house has one way of numbering a tile: set far larger than
   the card, pushed past its bottom-right corner so the edge crops it, and FILLED at a breath of white
   that warms to gold under the hand, rather than outlined. That fraction is what keeps it a texture
   behind the words instead of a figure competing with them, the way a magazine sets a folio.
   As a 0.58rem label in capitals above the title it opens four cards with four tiny eyebrows and pushes
   the heading — the thing a reader is here to read — into third place. */
.artist-included-number {
    position: absolute;
    right: -.04em;
    bottom: -.1em;
    z-index: 0;
    color: var(--tint);
    font-family: var(--font-display);
    font-size: clamp(6rem, 9vw, 9.5rem);
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: .8;
    pointer-events: none;
    transition: color var(--motion) var(--ease-house);
    user-select: none;
}

.artist-close {
    position: relative;
    overflow: hidden;
    /* The house measure at both ends, the foot included. A shorter foot assumes the concierge's own block
       follows and brings air of its own, which is not true here: the artist's page renders no
       _ProductAiChat, so the two buttons are the last thing before the footer. */
    padding: var(--section-space) 0;
    border-top: 1px solid var(--line);
    text-align: center;
}

    /* The house lattice, the same two 45° rules at the same 72px the heroes and the domain pages
       draw it at — quoted rather than re-invented, so the closing band belongs to the same document
       as the page that opened. The radial mask is what keeps it a ground and not a wallpaper: it is
       strongest behind the heading and gone before it reaches the edges. */
    .artist-close::before {
        position: absolute;
        z-index: 0;
        background-image: linear-gradient(45deg, transparent calc(50% - .5px), var(--hairline) 50%, transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), var(--hairline) 50%, transparent calc(50% + .5px));
        background-position: center;
        background-size: 72px 72px;
        content: "";
        inset: 0;
        -webkit-mask-image: radial-gradient(ellipse at center, #050505 12%, rgba(5, 5, 5, .6) 52%, transparent 88%);
        mask-image: radial-gradient(ellipse at center, #050505 12%, rgba(5, 5, 5, .6) 52%, transparent 88%);
        pointer-events: none;
    }

    .artist-close > .container {
        position: relative;
        z-index: 1;
    }

    .artist-close .h-desc {
        margin-bottom: clamp(2rem, 4vh, 3rem);
    }

.artist-close-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.4rem 2.5rem;
}

/* #endregion */

/* #region Responsive */
@media (max-width: 1000px) {
    /* The work comes first in the markup, so one column puts the picture above the name — which is
       the order that made the two-column layout worth building. */
    .artist-hero-inner {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 5vh, 3rem);
    }

    /* One column, so every explicit placement in the hero has to go with it — including the name's
       span, which in a single-column grid is the column it already sits in. */
    .artist-hero-exhibit,
    .artist-hero-copy,
    .artist-plate {
        grid-column: 1;
        grid-row: auto;
    }

    /* One column, so the explicit placements above have to go — a child asking for column two in a
       single-column grid creates a second column and the layout comes back in two. */
    .artist-portrait,
    .artist-about-copy {
        grid-column: 1;
        grid-row: auto;
    }

    .artist-about-inner {
        grid-template-columns: 1fr;
    }

    .artist-portrait {
        width: min(220px, 60%);
    }

    /* Column-wide, the square frame was up to two screens tall on a phone held sideways, and the
       name and the button under it were never on the first one. */
    .artist-hero-exhibit .oak-frame-plate {
        width: min(100%, 62svh);
        margin-inline: auto;
    }
}

/* Four items: four abreast where they fit and two by two below, never three and an orphan. */
@media (min-width: 1101px) {
    .artist-included-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 601px) and (max-width: 1100px) {
    .artist-included-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* #endregion */

@media (prefers-reduced-motion: reduce) {
    /* Nothing here for the hero's frame: the oak model's own sway and lean are switched off by
       product.css and by the script, which reads this same query before it follows a pointer. */
    .artist-portrait img,
    .cat-card-work img,
    .cat-card-profile > span {
        transition: none;
    }

    .artist-portrait:hover img,
    .cat-card:hover .cat-card-profile > span {
        transform: none;
    }

    .cat-card:hover .cat-card-work img {
        transform: scale(1.01);
    }
}