/* #region Steps section */
.steps-section {
    position: relative;
}

.steps-flex {
    display: flex;
    align-items: flex-start;
    gap: 8vw;
}

.steps-sticky {
    flex: 1;
    position: sticky;
    top: 30vh;
    padding-right: 2vw;
}

.steps-tag {
    display: block;
    margin-bottom: 2.4vh;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 400;
    letter-spacing: 8px;
    /* The house eyebrow's tracking, and therefore the amount sup.tm has to give back — see .h-tag,
       which owns this specification. Without it a ™ in a label stands a visible gap off the name. */
    --tm-tracking: 8px;
    text-transform: uppercase;
    opacity: .9;
}

.steps-title {
    margin-bottom: 4vh;
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--section-title-size);
    font-weight: 300;
    letter-spacing: -.035em;
    line-height: var(--section-title-line-height);
}

    .steps-title i {
        color: var(--gold);
    }

.steps-desc {
    max-width: 450px;
    color: var(--text-muted);
    font-size: 1.05rem;
    font-weight: 200;
    line-height: 1.8;
}

.steps-scroll {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 15vh;
    padding: 10vh 0;
}

.step-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3vh;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--ease-house), transform 1s var(--ease-house);
}

    .step-item.visible {
        opacity: 1;
        transform: translateY(0);
    }

.step-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-card);
}

    /* THE HOUSE'S CLOSED PASSE-PARTOUT — defined here, once, for every picture that carries it.
       A hairline set in from the edge, the way a mount sits inside a frame, and it is the ONLY line a
       framed picture gets: where this is present, a border around the box is a second frame saying
       the same thing, and two hairlines a few pixels apart read as an accident rather than as a
       system. The three hosts that had both — the step box, the founding certificate and the pairing
       band's picture — gave their outer border up. Closed on all four sides, unlike the ladder's
       further down this file, which
       opens toward the rule the ladder hangs from — that is the one variant, and it exists because
       there is a line there for it to open toward.

       A picture that wants this mount joins the two selector lists below. It does not get its own copy:
       written out per host, this becomes three insets that drift apart. The pseudo-element differs per host
       only because some of them already use
       ::before for something else. */
    .step-img-box::before,
    .atelier-craft-media::after,
    .atelier-founding-frame::after,
    .manifest-craft-frame::after,
    .research-category-tile::after,
    .research-country-tile::after,
    .library-book-visual::after,
    .alibi-object-photo::after,
    .filmable-exhibit-frame::after,
    .ep-visual::after {
        position: absolute;
        z-index: 2;
        inset: clamp(.6rem, 1.4vw, 1.1rem);
        border: 1px solid var(--photo-frame);
        content: '';
        pointer-events: none;
        transition: inset var(--motion) var(--ease-house), border-color var(--motion) var(--ease-house);
    }

    /* It opens outward while the photograph pushes in — the picture already zooms on hover, so the
       mount answering it is one gesture in two directions rather than a second effect. The hover
       lives on whatever the visitor is actually pointing at, which is not always the box itself. */
    .step-img-box:hover::before,
    .atelier-craft-piece:hover .atelier-craft-media::after,
    .atelier-founding-frame:hover::after,
    .manifest-craft-frame:hover::after,
    .research-category-tile:hover::after,
    .research-country-tile:hover::after,
    .library-book-visual:hover::after,
    .library-book-visual:focus-visible::after,
    .alibi-object-photo:hover::after,
    .ep-visual:hover::after,
    .ep-visual:focus-visible::after,
    .ep-visual-link:hover .ep-visual::after,
    .ep-visual-link:focus-visible .ep-visual::after {
        inset: clamp(.4rem, 1vw, .8rem);
        border-color: var(--photo-frame-hover);
    }

@media (prefers-reduced-motion: reduce) {
    .step-img-box::before,
    .atelier-craft-media::after,
    .atelier-founding-frame::after,
    .manifest-craft-frame::after,
    .research-category-tile::after,
    .research-country-tile::after,
    .library-book-visual::after,
    .alibi-object-photo::after,
    .filmable-exhibit-frame::after,
    .ep-visual::after,
    .step-img {
        transition: none;
    }
}

.step-img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    filter: var(--photo-at-rest);
    transition: transform 1.8s var(--ease-house), filter var(--motion-slow) var(--ease-house);
}

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

.step-num {
    display: block;
    margin-top: 2vh;
    margin-bottom: 1vh;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.step-item h3 {
    margin-bottom: 1.5vh;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    font-weight: 300;
}

    .step-item h3 i {
        color: var(--gold);
        font-weight: 300;
    }

.step-item p {
    max-width: 600px;
    color: var(--text-muted);
    font-size: 1.05rem;
    font-weight: 200;
    line-height: 1.8;
}

@media (max-width: 1000px) {
    .steps-flex {
        flex-direction: column;
    }

    /* Stacked above its steps, the heading keeps the left edge the steps below it read from — centred,
       a paragraph of body copy turns into a ragged column on both sides and no longer lines up with
       anything on the page. */
    .steps-sticky {
        position: relative;
        top: 0;
        margin-bottom: 4vh;
        padding-right: 0;
    }

    .steps-scroll {
        padding-top: 0;
    }
}
/* #endregion */

/* #region Product Journal Teasers */
.product-journal {
    position: relative;
    padding: var(--section-space) 0;
    border-top: 1px solid var(--section-divider);
    background: var(--hero-surface);
}


.pj-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 8vh;
    padding-bottom: 22px;
}

    /* Stated against the section, so it outranks the wider rhythm a product page sets for its own
       headings: what stands under this one is four small cards, and eight per cent of the window
       between a heading and its footnote is the spacing of a chapter opening. Which makes it the
       site's standard section rhythm, so it asks for that rather than naming a sixth measure. */
    .product-journal .pj-header {
        margin-bottom: var(--section-head-gap);
    }

    .pj-header h2 {
        margin: 0;
        color: var(--white);
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        letter-spacing: -.035em;
        line-height: var(--section-title-line-height);
    }

        .pj-header h2 i {
            color: var(--gold);
            font-weight: 300;
        }

/* A block box of its own width, not an inline one: as an inline-flex the top margin is measured into the
   line box and the link sits on the paragraph above it. The padding keeps the
   hit area reaching over the words, and the margin subtracts it so the visible gap is the one below.
   The width keeps the rule under the words instead of across the whole column. */
/* No `gap`, and the reason is the ™ — the same reason .ep-cta has none, written down there once and
   never carried over to this class. A <sup class="tm"> is a flex item like any other, so a gap meant
   for the arrow was applied on both sides of the trademark as well, and „Przeczytaj regulamin
   Odoardo Space™ →" read as three separated things. Reported twice, and the second time with the
   right guess attached. The arrow carries its own margin instead. */
.home-product-link {
    display: flex;
    width: fit-content;
    align-items: center;
    padding-top: 12px;
    margin-top: calc(clamp(2.5rem, 6vh, 4.5rem) - 12px);
    padding-bottom: .8rem;
    font-family: var(--font-sans);
    font-size: clamp(.65rem, .8vw, .78rem);
    font-weight: 300;
    letter-spacing: .22em;
    text-decoration: none;
    text-transform: uppercase;
}

    /* The arrow's own distance, in place of the gap above. Last child rather than every child span:
       one of these links wraps its label in a span of its own so the ™ stays inside the word, and
       that span must not be pushed away from the link's own left edge. */
    .home-product-link > span:last-child {
        margin-left: 14px;
    }

.pj-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pj-all-arrow {
    transition: transform var(--motion) var(--ease-house);
}

.pj-all-link:hover .pj-all-arrow {
    transform: translateX(4px);
}

/* Four across, not two. This section is a postscript on every page that carries it — a product page, the
   home page, the foot of an article — and at half the width each the four squares come out about seven
   hundred pixels a side, staggered, which is more room than the offer above them. The Magazyn builds its
   listing from its own component, so the tiles that are the point of a page are untouched by this: here
   they are an aside. */
.pj-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1.1rem, 1.8vw, 1.8rem);
    row-gap: clamp(1.6rem, 2.4vw, 2.4rem);
    align-items: start;
}

.pj-card {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}

/* No stagger. Two tall cards leaning past each other read as a spread; four in a row read as a
   shelf, and a shelf is what a footnote to a page should look like. */

    .pj-card::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 4;
        border: 1px solid transparent;
        pointer-events: none;
        transition: border-color var(--motion) var(--ease-house);
    }

    .pj-card:hover::before {
        border-color: rgba(var(--gold-rgb),.45);
    }

.pj-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--black);
}

    .pj-image-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        background: linear-gradient(to bottom, rgba(5,5,5,.05) 0%, rgba(5,5,5,0) 32%, rgba(5,5,5,.4) 68%, rgba(5,5,5,.85) 100%);
        pointer-events: none;
        transition: opacity .8s ease;
    }

/* The scrim gets stronger under a hand, not weaker: the title turns gold at the same moment and gold
   on a lit photograph is the one colour that disappears. */
.pj-card:hover .pj-image-wrapper::after {
    opacity: 1;
}

.pj-img {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: var(--photo-mute) var(--photo-at-rest);
    transition: transform 1.8s var(--ease-house), filter var(--motion-slow) var(--ease-house);
}

/* Colour comes back and the light goes down. Brightening is the natural thing to do to a photograph and
   the wrong thing to do under gold type. */
.pj-card:hover .pj-img {
    filter: var(--photo-under-type);
    transform: scale(1.025);
}

.pj-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    padding: 5px 9px;
    border: 1px solid var(--hairline-strong);
    background: rgba(5,5,5,.45);
    color: var(--white-soft);
    font-family: var(--font-sans);
    font-size: .5rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    transition: background var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house);
}

/* The plate deepens on hover instead of inverting. Filled with gold it put the label's own type —
   8px, uppercase, 4px of tracking — in near-black on a mid-tone, and at that size the letters
   dissolve however sound the contrast ratio looks on paper: what fails is the stroke, not the
   arithmetic. Darkening the ground and lifting the border keeps the gold accent the hover is for,
   and keeps the word readable while it happens. */
.pj-card:hover .pj-tag {
    border-color: var(--gold);
    background: rgba(5,5,5,.75);
    color: var(--gold);
}

.pj-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: clamp(1.3rem, 2vw, 1.9rem) clamp(1rem, 1.3vw, 1.3rem) clamp(1rem, 1.3vw, 1.2rem);
    transform: translateY(10px);
    transition: transform var(--motion) var(--ease-house);
}

.pj-card:hover .pj-content {
    transform: translateY(0);
}

.pj-title {
    display: -webkit-box;
    margin: 0 0 .75rem;
    overflow: hidden;
    color: var(--white);
    font-family: var(--font-display);
    /* Set for a card a quarter of the row wide: any larger and a headline fills the whole square, which
       turns the picture under it into a background for the type. */
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    font-weight: 300;
    letter-spacing: -.005em;
    line-height: 1.32;
    text-shadow: 0 2px 18px rgba(5,5,5,.55);
    transition: color var(--motion-quick) var(--ease-house);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.pj-card:hover .pj-title {
    color: var(--gold);
}

.pj-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 1rem;
    border-top: 1px solid rgba(245,245,245,.18);
}

.pj-date {
    color: rgba(245,245,245,.55);
    font-family: var(--font-sans);
    font-size: .52rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.pj-read {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(245,245,245,.45);
    font-family: var(--font-sans);
    font-size: .52rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: color var(--motion-quick) var(--ease-house), letter-spacing var(--motion-quick) var(--ease-house);
}

.pj-read-arrow {
    transition: transform var(--motion) var(--ease-house);
}

.pj-card:hover .pj-read {
    color: var(--gold);
    letter-spacing: 5px;
}

.pj-card:hover .pj-read-arrow {
    transform: translateX(6px);
}

/* Four across is a shelf on a desk; on a laptop it becomes two rows of two, and on a phone one card
   under another. The squares never grow past their desk size — the breakpoints only decide how many stand
   beside each other. */
@media (max-width: 1100px) {
    .pj-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pj-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2rem;
    }
}

@media (max-width: 600px) {
    .product-journal {
        padding: var(--section-space) 0;
    }

    .pj-header {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 20px;
    }
}
/* #endregion */

/* #region Home book cross-link strip */
/* One line under this strip, and it is the section's own — full-bleed, edge to edge. The strip must not
   draw a second rule: it is capped at the content width, so such a rule stops short of both edges and reads
   as an unfinished underline beside the full-width one. The padding is the strip's whole height: it holds a
   single line of text, so it needs no more.

   Modest air of its own, equal above and below that line. The strip is not the tall thing here — it stands
   between the section ending overhead and the footer's own opening, and those two together make the void it
   can seem to float in. */
.home-book-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    width: min(90vw, var(--section-content-max));
    margin: 0 auto;
    padding: clamp(1.6rem, 3vh, 2.4rem) 0;
    background: transparent;
}

.home-book-strip-copy {
    flex: 1 1 auto;
    color: var(--white-soft);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
}

.home-book-strip-link {
    text-decoration: none;
}

    .home-book-strip-link i {
        display: inline-block;
        color: var(--white);
        font-family: var(--font-display);
        font-size: 1.35rem;
        font-style: italic;
        font-weight: 400;
        transition: color var(--motion-quick) var(--ease-house);
    }

    .home-book-strip-link:hover i,
    .home-book-strip-link:focus-visible i {
        color: var(--gold);
    }

/* The title takes the line's colour, so the whole name turns gold together under the hand. */
.home-book-strip-title {
    color: inherit;
}

.home-book-strip-sep {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 .85em;
    background: var(--white-dim);
    border-radius: 50%;
    vertical-align: middle;
}

.home-book-strip-author {
    color: var(--white-soft);
    font-size: .85rem;
    font-weight: 300;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house);
}

    .home-book-strip-author:hover,
    .home-book-strip-author:focus-visible {
        color: var(--gold);
        border-color: var(--gold);
    }

.home-book-strip-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -10px;
    color: var(--white);
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--motion-quick) var(--ease-house);
    white-space: nowrap;
}

    .home-book-strip-cta:hover,
    .home-book-strip-cta:focus-visible {
        color: var(--gold);
    }

    /* The arrow's travel and colour are site.css's micro-interaction; only its distance is set here. */
    .home-book-strip-cta span {
        margin-left: .3em;
    }

/* The CTA is nowrap, so between 641 and 760px the strip must also be allowed to wrap. */
@media (max-width: 760px) {
    .home-book-strip {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .home-book-strip-copy {
        flex-basis: 100%;
    }
}
/* #endregion */

/* #region Concierge chat */
.core-interface.home-concierge {
    position: relative;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0;
    margin-left: 0;
    padding: var(--section-space) 0;
    overflow: hidden;
    border-top: 1px solid var(--section-divider);
    border-bottom: 1px solid var(--section-divider);
    background: var(--surface-editorial);
    /* No scroll-margin of its own. html already carries scroll-padding-top: var(--site-header-h)
       (site.css), which is what lands an anchor target under the fixed header — and the two add up.
       A 70px margin here therefore opened the concierge a whole header's height below the bar, and
       naming the header's real height instead only doubled it exactly. The section's top rule now
       meets the underside of the header, which is what the orb in the corner should reach. */
}

/* General sibling on purpose: the hidden configurator modal now stands between the pricing
   section and the concierge in the DOM, and `+` stopped matching on every product page. */
.pricing-section ~ .core-interface.home-concierge {
    margin-top: 0;
}

/* The bottom padding is --section-space like the top, whatever follows — the section is one block and both of
   its edges are measured the same way. Do not override it for whatever comes next, whether with a
   viewport-height clamp or with extra rem when the Filmable band follows: either leaves this section alone on
   the page with a foot deeper than its head, and the band below draws its own top rule regardless, so the air
   is not what separates the two. A page that genuinely needs a different foot here says so in its own
   stylesheet, as Alibi and the article wrapper do. */

.home-concierge::after {
    display: none;
}

.home-concierge-heading, .home-concierge-interface {
    width: min(90vw, var(--hero-content-max));
    max-width: none;
    padding-inline: 0;
}

.home-concierge-heading {
    position: relative;
    z-index: 2;
    padding-top: 0;
}

    /* The eyebrow's distance comes from .h-tag; only the gap under the title is this heading's own.
       It is a clamp rather than a bare 6vh, and that is the point: every other distance in the house's
       vertical rhythm is written as clamp(rem, v-unit, rem), so a bare 6vh is the one gap in the block that
       shrinks with the window while its neighbours hold. On a short laptop 6vh is 42px — visibly tighter than
       the same heading on a tall monitor, for no reason a reader could name. The floor answers that; the
       ceiling keeps a tall screen from opening a hole.

       The distance is also smaller than a heading with a lead paragraph under it takes. This block never has
       one — a chat introduces itself — so the wider measure stands the title a whole missing paragraph above
       the conversation it announces. The narrow screen is already tuned
       down to nearly this value; now the two agree. */
    .home-concierge-heading h2 {
        margin: 0 0 clamp(2.4rem, 5vh, 3.6rem);
        color: var(--white);
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        letter-spacing: -.035em;
        line-height: var(--section-title-line-height);
    }

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

/* No lead-paragraph rule here. Neither the partial nor the home page's own copy of this block puts a <p>
   in the heading, and the partial says why: a chat introduces itself, so there is deliberately no way to
   pass one. A rule for an element nothing renders sizes the gap above for a paragraph that never comes. */

.home-concierge-interface {
    position: relative;
    z-index: 2;
    min-height: 360px;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
    gap: clamp(3rem, 7vw, 8rem);
    /* No padding of its own at the top: the seam above belongs to the heading's bottom margin, and
       both drawing it added a flat 3rem to a distance that is otherwise a clamp. The inline zero it
       also carried is already set where this block's width is. */
}

.home-concierge-dialogue {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home-concierge .canvas-area {
    width: 100%;
    max-width: 760px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 5vh;
}

.home-concierge .voice-line-brand {
    margin-left: 0;
}

/* The whole width of the column, like the wordmark above it stands at its left edge. The column is a
   flex column that centres its children, so a line shorter than the column — the greeting — was
   shrunk to its own width and set in the middle, where text-align has nothing to align. */
.home-concierge .voice-line {
    align-self: stretch;
}

.home-concierge .voice-line {
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.1vw, 1.7rem);
    font-weight: 300;
    line-height: 1.5;
    text-align: left;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity .5s var(--ease-house), transform .5s var(--ease-house);
}

    .home-concierge .voice-line i {
        color: var(--gold);
    }

/* The works the concierge shows under its answer: square, like every image of the house, at most three in
   a row, each leading to its artist's page. */
.home-concierge .voice-artworks {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 3vh;
}

    .home-concierge .voice-artworks[hidden] {
        display: none;
    }

.home-concierge .voice-artwork {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--white);
    text-decoration: none;
    animation: voice-artwork-in .5s var(--ease-house) both;
}

    .home-concierge .voice-artwork img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border: 1px solid var(--hairline-mid);
        transition: border-color var(--motion-quick) var(--ease-house);
    }

    .home-concierge .voice-artwork:hover img,
    .home-concierge .voice-artwork:focus-visible img {
        border-color: var(--gold);
    }

.home-concierge .voice-artwork-title {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.35;
}

.home-concierge .voice-artwork-artist {
    font-size: .62rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
}

    .home-concierge .voice-artwork:hover .voice-artwork-title,
    .home-concierge .voice-artwork:focus-visible .voice-artwork-title {
        color: var(--gold);
    }

@keyframes voice-artwork-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .home-concierge .voice-artworks {
        gap: 10px;
    }

    .home-concierge .voice-artwork-artist {
        letter-spacing: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-concierge .voice-artwork {
        animation: none;
    }
}

.home-concierge .input-zone, .home-concierge .input-wrapper {
    width: 100%;
    max-width: 760px;
    align-items: stretch;
}

.home-concierge .input-container {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--hairline-mid);
    transition: border-color .35s var(--ease-house);
}

    .home-concierge .input-container:focus-within {
        border-color: var(--gold);
    }

.home-concierge .terminal-input {
    min-width: 0;
    flex: 1;
    padding: 1rem .5rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--white);
    caret-color: var(--gold);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    font-style: italic;
}

    /* An invitation to type, not a label for the field. Set in caps and tracked it read as an
       eyebrow — the only placeholder on the site that did, while the domain search, the Research
       search and every field in the account area show ordinary words. It also disagreed with the
       concierge on the product pages, which set the same placeholder in a different face again. */
    .home-concierge .terminal-input::placeholder {
        color: var(--white-ghost);
        font-family: var(--font-sans);
        font-size: .92rem;
        font-style: normal;
        letter-spacing: .02em;
    }

.home-concierge .send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 0;
    background: transparent;
    color: var(--white);
    opacity: .7;
    transition: opacity var(--motion-quick) var(--ease-house), transform var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house);
}

    .home-concierge .send-btn:hover, .home-concierge .send-btn:focus-visible {
        color: var(--gold);
        opacity: 1;
        transform: translateX(3px);
    }

    .home-concierge .send-btn:focus-visible {
        outline: 1px solid var(--gold);
        outline-offset: 3px;
    }

    .home-concierge .send-btn:disabled {
        opacity: .25;
        transform: none;
    }

    .home-concierge .send-btn svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
    }

.home-concierge .mic-btn, .home-concierge .tts-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem .75rem;
    border: 0;
    background: transparent;
    color: var(--white);
    opacity: .45;
    transition: opacity var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house);
}

    .home-concierge .mic-btn[hidden], .home-concierge .tts-btn[hidden] {
        display: none;
    }

    .home-concierge .mic-btn:hover, .home-concierge .mic-btn:focus-visible,
    .home-concierge .tts-btn:hover, .home-concierge .tts-btn:focus-visible {
        color: var(--gold);
        opacity: 1;
    }

    .home-concierge .mic-btn:focus-visible, .home-concierge .tts-btn:focus-visible {
        outline: 1px solid var(--gold);
        outline-offset: 3px;
    }

    .home-concierge .mic-btn svg, .home-concierge .tts-btn svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
    }

    /* Listening is a slow breath of the light, never a beat of the size. */
    .home-concierge .mic-btn.listening {
        color: var(--gold);
        opacity: 1;
        animation: concierge-mic-pulse 2.4s ease-in-out infinite;
    }

    .home-concierge .tts-btn.active {
        color: var(--gold);
        opacity: 1;
    }

@keyframes concierge-mic-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .45;
    }
}

.home-concierge .ai-label {
    margin-top: .8rem;
    padding-left: .5rem;
    color: var(--white-ghost);
    font-family: var(--font-mono);
    font-size: .5rem;
    letter-spacing: .26em;
    text-align: left;
    text-transform: uppercase;
}

/* The sentence saying that a machine writes these answers is the one statement the law requires a visitor to
   be able to read, and at half a rem under fifty percent opacity it is decoration. It is set at a readable
   size and at full contrast, a step above the line below it, which is why the fading sits on the halves
   separately rather than on the container. */
.home-concierge .ai-label .ai-statement {
    display: block;
    margin-bottom: .3rem;
    color: var(--white-soft);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: none;
}

.home-concierge .ai-label .ai-secondary {
    display: block;
}

/* A sentence, not a label: the caps and the wide tracking belong to the mono eyebrow above it and make a
   whole line of running text hard to read. What it says — that the conversation is kept and where the
   details are — is worth reading, so it is not whispered at half opacity either. */
.home-concierge .ai-label .ai-secondary {
    opacity: .85;
    color: var(--white-soft);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: none;
}

    /* Both links — the voice's name and the privacy policy — carry their sentence's colour (left alone
       they rendered in the browser's own link violet) and answer a hover the same way. */
    .home-concierge .ai-label a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color .3s ease;
    }

        .home-concierge .ai-label a:hover {
            color: var(--gold);
        }

.home-concierge .whisper-label {
    margin-bottom: 1.5rem;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 6px;
    text-align: left;
    text-transform: uppercase;
    transition: opacity .3s ease;
}

.home-concierge .whispers-wrapper {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: .4rem 0;
}

.home-concierge .whispers-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Smaller than it looks: each suggestion now carries its own vertical padding, so the space
       between two of them is this gap plus that padding on both sides. */
    gap: .55rem;
    transition: opacity .3s ease;
}

.home-concierge .whisper-tag.home-link {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    /* A suggestion is a naked line of text, so the words are the whole target. Two of them ran a
       question long enough to wrap, and at 1.5 the two lines sat close enough that a click aimed
       between them landed on the neighbouring suggestion. The looser leading and the padding
       belong together: one separates the lines inside a suggestion, the other separates one
       suggestion from the next without moving the text off the column's left edge. */
    padding: .45rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--white);
    font-family: var(--font-sans);
    font-size: clamp(.78rem, .9vw, .9rem);
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.8;
    text-align: left;
    text-transform: none;
    transform: none;
    transition: color var(--motion-quick) var(--ease-house), gap var(--motion-quick) var(--ease-house);
}

    .home-concierge .whisper-tag.home-link:hover, .home-concierge .whisper-tag.home-link:focus-visible {
        gap: 20px;
        border-color: transparent;
        background: transparent;
        color: var(--gold);
        transform: none;
    }

.home-concierge .hidden {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 900px) {
    .home-concierge-interface {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .home-concierge .whispers-wrapper {
        min-height: 0;
        padding: 3rem 0 0;
        border-top: 1px solid var(--hairline-mid);
        border-left: 0;
    }
}

@media (max-width: 650px) {
    .core-interface.home-concierge {
        margin-top: 0;
        padding-block: var(--section-space);
    }

    .home-concierge-heading h2 {
        margin-bottom: clamp(2.2rem, 5vh, 3.4rem);
        font-size: clamp(2.2rem, 12vw, 4rem);
    }

    .home-concierge-interface {
        min-height: 0;
        gap: 3rem;
        margin-top: 2vh;
        padding-block: 2.5rem;
    }

    .home-concierge .canvas-area {
        min-height: 150px;
        margin-bottom: 3vh;
    }

    .home-concierge .voice-line {
        font-size: 1.3rem;
    }

    .home-concierge .terminal-input {
        font-size: 1.15rem;
        text-align: left;
    }

        .home-concierge .terminal-input::placeholder {
            font-size: .82rem;
        }

    /* The base rule sets its own padding with three classes of specificity — matching it here
       is the only way this larger touch-size padding ever applies. */
    .home-concierge .whisper-tag.home-link {
        padding-block: .85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-concierge .voice-line, .home-concierge .whispers-box, .home-concierge .whisper-label {
        transition: none;
    }

    .home-concierge .mic-btn.listening {
        animation: none;
    }
}
/* #endregion */

/* A link-styled button: the ask-the-butler CTAs are buttons semantically but read like the
   quiet product links around them. */
/* Only the sides the browser draws on a button, never the shorthand: `border: 0` and `padding: 0`
   also took the rule under the words and the .8rem standing above it, so a CTA written as a
   button lost the underline every link beside it carries. The bottom of both is .home-product-link's
   to set, and stays its to change. The same goes for the background: the underline is drawn as two
   background layers in site.css, so only the button's own fill colour is cleared here. */
button.home-product-link {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background-color: transparent;
    cursor: pointer;
}

/* #region Domain search */
.domain-search {
    max-width: 460px;
}

.domain-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--hairline-mid);
    background: rgba(5, 5, 5, .72);
    transition: border-color .35s var(--ease-house), box-shadow .35s var(--ease-house);
}

    .domain-search-bar:focus-within {
        border-color: var(--gold);
        box-shadow: 0 0 0 1px rgba(var(--gold-rgb),.18);
    }

    .domain-search-bar input {
        flex: 1;
        min-width: 0;
        padding: .9rem 1.05rem;
        border: 0;
        background: transparent;
        color: var(--white);
        font-family: var(--font-sans);
        font-size: .88rem;
        font-weight: 300;
        letter-spacing: .03em;
    }

        .domain-search-bar input::placeholder {
            color: var(--text-muted);
        }

/* The field stays at 16px so iOS does not zoom into it; only the example inside it is set smaller on a
   narrow phone, where „…np. kardiolog" otherwise lost its last word. */
@media (max-width: 400px) {
    .domain-search-bar input::placeholder {
        font-size: .8rem;
    }
}

        .domain-search-bar input:focus {
            outline: none;
        }

    .domain-search-bar svg {
        margin-right: 1rem;
        color: rgba(245, 245, 245, .5);
        flex: none;
        transition: color .35s var(--ease-house);
    }

    .domain-search-bar:focus-within svg {
        color: var(--gold);
    }

    /* Below 16px iOS Safari zooms the page on focus and never zooms back out, and this field stands
       in the middle of a section rather than at its top — the page comes back from that zoom scrolled
       somewhere the visitor did not ask for. Raised on phones only, so the desktop bar keeps its size. */
    @media (max-width: 760px) {
        .domain-search-bar input {
            font-size: max(16px, .88rem);
        }
    }

.domain-search-results {
    margin-top: .5rem;
    border: 1px solid var(--hairline-mid);
    background: rgba(5, 5, 5, .94);
}

.domain-search-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    padding: .7rem 1.05rem;
    color: var(--white);
    text-decoration: none;
    transition: background .25s var(--ease-house);
}

    .domain-search-row + .domain-search-row {
        border-top: 1px solid var(--hairline-faint);
    }

    .domain-search-row:hover,
    .domain-search-row:focus-visible {
        background: rgba(var(--gold-rgb),.08);
        outline: none;
    }

/* A thirty-letter address beside the status does not fit a phone's field, and a flex item will not
   shrink below its longest word — the status was pushed out past the frame. */
.domain-search-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-sans);
    font-size: .88rem;
    font-weight: 400;
    letter-spacing: .04em;
}

/* A free address reads in white against the muted taken one, and takes the gold under the hand. */
.domain-search-status {
    color: var(--white);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .25s var(--ease-house);
}

    .domain-search-row:hover .domain-search-status,
    .domain-search-row:focus-visible .domain-search-status {
        color: var(--gold);
    }

    .domain-search-status.is-taken,
    .domain-search-row:hover .domain-search-status.is-taken,
    .domain-search-row:focus-visible .domain-search-status.is-taken {
        color: var(--text-muted);
    }

.domain-search-empty {
    margin: 0;
    padding: .8rem 1.05rem .35rem;
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 300;
    line-height: 1.6;
}

.domain-search-ask {
    display: block;
    width: 100%;
    padding: .65rem 1.05rem .85rem;
    border: 0;
    background: transparent;
    color: var(--white);
    font-family: var(--font-sans);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--motion-quick) var(--ease-house);
}

    .domain-search-ask:hover,
    .domain-search-ask:focus-visible {
        color: var(--gold);
        outline: none;
    }
/* #endregion */

/* #region Journey — one photograph, the steps beside it */
/* How the house shows a path: one square photograph held on the left while the steps run down the
   right, each under its rotated index. It is stated here, in the sheet every product page carries, rather
   than in filmable.css, which one page loads: kept there, the Lens anatomy cannot have it without a copy of
   three hundred lines. The
   two sections are one component with two sets of copy. */
/* clip, not hidden: hidden makes the section a scroll container, and the photograph's sticky position
   then has nothing to stick to — it scrolled away with the first step. */
.journey {
    position: relative;
    overflow: hidden;
    overflow: clip;
    padding: var(--section-space) 0;
    border-bottom: 1px solid var(--section-divider);
    background: radial-gradient(circle at 12% 22%, var(--tint), transparent 27%), var(--black);
}

    .journey::before {
        position: absolute;
        top: clamp(6rem, 14vw, 12rem);
        right: max(-14rem, -12vw);
        width: clamp(24rem, 42vw, 44rem);
        aspect-ratio: 1;
        border: 1px solid var(--hairline-faint);
        content: "";
        pointer-events: none;
        transform: rotate(45deg);
    }

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

.journey-header {
    padding-bottom: clamp(3.5rem, 8vh, 7rem);
}

    .journey-header h2 {
        max-width: 16ch;
        margin-top: 1.5rem;
    }

.journey-step h3 i,
.journey-outcome p i {
    color: var(--gold);
}

.journey-header > p {
    max-width: 52ch;
    margin-top: 2rem;
    color: var(--text-muted);
    font-size: clamp(1rem, 1vw, 1.05rem);
    font-weight: 200;
    line-height: 1.85;
}

.journey-stage {
    display: grid;
    grid-template-columns: minmax(20rem, .82fr) minmax(0, 1.18fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
}

.journey-frame {
    position: sticky;
    top: 14vh;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--surface-card);
    box-shadow: 0 32px 90px rgba(5, 5, 5, .56);
}

    .journey-frame::after {
        position: absolute;
        inset: 1rem;
        border: 1px solid rgba(245, 245, 245, .16);
        content: "";
        pointer-events: none;
    }

    .journey-frame img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        filter: var(--photo-as-ground);
        transform: scale(1.015);
    }

/* No caption over the journey photograph, on either page that uses this frame. Both carried one and
   both lost it for the same reason: the steps standing beside the picture already name the moment it
   shows, in the order it happens, so the label repeated the first step over the top of the image. */

.journey-focus {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24%;
    aspect-ratio: 1;
    border: 1px solid var(--white-faint);
    box-shadow: 0 0 0 100vmax rgba(5, 5, 5, .08);
    transform: translate(-50%, -62%) rotate(45deg);
}

    .journey-focus::before,
    .journey-focus::after {
        position: absolute;
        top: 50%;
        left: 50%;
        background: var(--white-faint);
        content: "";
        transform: translate(-50%, -50%);
    }

    .journey-focus::before {
        width: 150%;
        height: 1px;
    }

    .journey-focus::after {
        width: 1px;
        height: 150%;
    }

.journey-path {
    border-top: 1px solid var(--line);
}

.journey-step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(7.5rem, .34fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    min-height: clamp(15rem, 34vh, 22rem);
    padding: clamp(2.5rem, 6vh, 5rem) 0;
    border-bottom: 1px solid var(--line);
}

    .journey-step::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--gold);
        content: "";
        transition: width var(--motion) var(--ease-house);
    }

    .journey-step:hover::before {
        width: 100%;
    }

    .journey-step h3 {
        max-width: 14ch;
        margin: .9rem 0 1.25rem;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 6.5vw, 3.25rem);
        font-weight: 300;
        letter-spacing: -.025em;
        line-height: 1.05;
        /* Unbalanced, „Gość zbliża telefon do karty w pokoju" breaks wherever the measure runs out — three
           lines of very different lengths under a 14ch cap. Balanced, the browser evens them for us, and
           the non-breaking space the copy carries between „do" and „karty" still holds: a two-letter
           preposition does not end a line in Polish, and balance does not override an authored break. Both
           journeys that use this step read from this rule. */
        text-wrap: balance;
    }

    .journey-step p {
        max-width: 54ch;
        color: var(--text-muted);
        font-size: 1rem;
        font-weight: 200;
        line-height: 1.8;
    }

.journey-status {
    display: flex;
    flex-direction: column;
}

.journey-index {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.6rem, 3.6vw, 3.4rem);
    aspect-ratio: 1;
}

    .journey-index::before,
    .journey-index::after {
        position: absolute;
        inset: 0;
        border: 1px solid var(--hairline-strong);
        content: "";
        transform: rotate(45deg);
        transition: transform var(--motion) var(--ease-house), border-color var(--motion) var(--ease-house);
    }

    .journey-index::after {
        inset: 5px;
        border-color: var(--hairline);
    }

    .journey-index i {
        position: relative;
        z-index: 1;
        display: block;
        color: var(--white);
        font-family: var(--font-serif);
        font-size: clamp(1rem, 1.4vw, 1.2rem);
        font-style: normal;
        font-weight: 400;
        transition: color var(--motion) var(--ease-house);
    }

/* The ring squares up and the figure inside it takes the gold with it. */
.journey-step:hover .journey-index::before,
.journey-step:hover .journey-index::after {
    border-color: var(--gold);
    transform: rotate(0deg);
}

.journey-step:hover .journey-index i {
    color: var(--gold);
}

.journey-label {
    display: block;
    margin-bottom: .8rem;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 400;
    letter-spacing: 8px;
    /* The house eyebrow's tracking, and therefore the amount sup.tm has to give back — see .h-tag,
       which owns this specification. Without it a ™ in a label stands a visible gap off the name. */
    --tm-tracking: 8px;
    text-transform: uppercase;
    opacity: .9;
}

.journey-outcome {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem 3rem;
    margin-top: clamp(4rem, 10vh, 8rem);
    padding: clamp(2rem, 4vw, 4rem);
    border: 1px solid var(--hairline-strong);
    background: linear-gradient(120deg, var(--tint-raised), var(--tint));
}

.journey-outcome-label {
    display: block;
    margin-bottom: 1rem;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 400;
    letter-spacing: 8px;
    /* The house eyebrow's tracking, and therefore the amount sup.tm has to give back — see .h-tag,
       which owns this specification. Without it a ™ in a label stands a visible gap off the name. */
    --tm-tracking: 8px;
    text-transform: uppercase;
    opacity: .9;
}

.journey-outcome p {
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.8rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.journey-outcome small {
    display: block;
    margin-top: .7rem;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 200;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .journey-stage {
        grid-template-columns: 1fr;
    }

    .journey-frame {
        position: relative;
        top: auto;
        width: 100%;
        max-width: 38rem;
        justify-self: start;
    }
}

/* Beside the photograph the step's heading has a third of the screen: the 6.5vw meant for phones holds
   its cap there, and „Zainteresowanie" ran past the section's clipped edge. */
@media (min-width: 901px) and (max-width: 1199px) {
    .journey-step h3 {
        font-size: clamp(1.5rem, 3.4vw, 3.25rem);
        overflow-wrap: break-word;
    }
}

@media (max-width: 600px) {
    .journey-step {
        grid-template-columns: 4rem 1fr;
        gap: 1rem;
    }

    .journey-outcome {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* #endregion */

/* #region Ladder — the alternating picture-and-words column */
/* One definition for every screen that tells a story this way: the five senses on the home page and
   the product cards on all ten industry pages. It existed twice, in home.css and segment.css, with
   different proportions, different gaps, the rule painted above the pictures on one page and behind
   them on the other, and two unrelated marks — a dot on the centre line here, a ring beside the copy
   joined by a horizontal tick there. Side by side they read as two houses.

   Both stylesheets load this one, so this is where the ladder lives. A page that carries the ladder
   adds no rules of its own; change a value here and both ends of the site move together. */

.home-anatomy-panels,
.alibi-ritual-grid {
    position: relative;
    display: grid;
    gap: clamp(4rem, 8vh, 7rem);
}

    /* Above the pictures, not behind them. The picture crosses the middle and the hairline runs on
       across it — behind them it vanished under every image, which turned one continuous rule into
       five separate rows. It arrives and leaves out of nothing, so it reads as one thing passing
       through the page rather than as a line with cut ends. */
    .home-anatomy-panels::before,
    .alibi-ritual-grid::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        z-index: 2;
        width: 1px;
        /* The strongest hairline: at a fainter weight the rule the whole section hangs from is barely
           there against the near-black ground. */
        background: linear-gradient(180deg,
            transparent 0,
            var(--hairline-strong) 9%,
            var(--hairline-strong) 93%,
            transparent 100%);
        content: '';
        pointer-events: none;
    }

.home-anatomy-panel,
.alibi-ritual-step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(3rem, 7vw, 8rem);
    align-items: center;
}

    /* The columns swap with the picture, so the image always takes the wider one and always crosses
       the middle. Nothing is reordered in the markup — the picture stays first for a screen reader. */
    .home-anatomy-panel:nth-child(even),
    .alibi-ritual-step:nth-child(even) {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    }

    .home-anatomy-panel:nth-child(even) .home-anatomy-image,
    .alibi-ritual-step:nth-child(even) figure {
        order: 2;
    }

    /* The mark where each step meets the rule — on the line itself, at the same 50% the rule uses,
       and above it so the circle stays whole. */
    .home-anatomy-panel::before,
    .alibi-ritual-step::before {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
        border-radius: 50%;
        background: var(--gold);
        content: '';
        pointer-events: none;
    }

/* A passe-partout, and it is open on the side that faces the rule: a picture on the left has no
   right edge, one on the right has no left edge, and on that side the two hairlines run out to the
   picture's own edge. So the mount does not box the photograph in — it opens toward the line the
   whole ladder hangs from, and the eye is carried to the middle instead of being stopped at a
   border. Faint on purpose: a strong line on five pictures in a row stops being a detail. */
.home-anatomy-image::before,
.alibi-ritual-step figure::before {
    position: absolute;
    z-index: 2;
    border: 1px solid var(--photo-frame);
    content: '';
    pointer-events: none;
    transition: inset var(--motion) var(--ease-house), border-color var(--motion) var(--ease-house);
}

    /* Picture on the left: open on the right. */
    .home-anatomy-panel:nth-child(odd) .home-anatomy-image::before,
    .alibi-ritual-step:nth-child(odd) figure::before {
        inset: var(--photo-frame-inset) 0 var(--photo-frame-inset) var(--photo-frame-inset);
        border-right: 0;
    }

    /* Picture on the right: open on the left. */
    .home-anatomy-panel:nth-child(even) .home-anatomy-image::before,
    .alibi-ritual-step:nth-child(even) figure::before {
        inset: var(--photo-frame-inset) var(--photo-frame-inset) var(--photo-frame-inset) 0;
        border-left: 0;
    }

    /* On hover the mount opens outward while the photograph pushes in — one gesture, two directions.
       A line that only brightened would be an ornament; this is the picture breathing inside it. */
    .home-anatomy-panel:nth-child(odd):hover .home-anatomy-image::before,
    .alibi-ritual-step:nth-child(odd):hover figure::before {
        inset: clamp(.45rem, 1.1vw, .9rem) 0 clamp(.45rem, 1.1vw, .9rem) clamp(.45rem, 1.1vw, .9rem);
        border-color: var(--photo-frame-hover);
    }

    .home-anatomy-panel:nth-child(even):hover .home-anatomy-image::before,
    .alibi-ritual-step:nth-child(even):hover figure::before {
        inset: clamp(.45rem, 1.1vw, .9rem) clamp(.45rem, 1.1vw, .9rem) clamp(.45rem, 1.1vw, .9rem) 0;
        border-color: var(--photo-frame-hover);
    }

@media (prefers-reduced-motion: reduce) {
    .home-anatomy-image::before,
    .alibi-ritual-step figure::before {
        transition: none;
    }
}

/* One column: the rule and its marks would cut through the middle of the copy, so both go, and the
   mount closes up into a plain frame — there is no line left for it to open toward. */
@media (max-width: 900px) {
    .home-anatomy-panels::before,
    .alibi-ritual-grid::before,
    .home-anatomy-panel::before,
    .alibi-ritual-step::before {
        display: none;
    }

    .home-anatomy-panel,
    .alibi-ritual-step,
    .home-anatomy-panel:nth-child(even),
    .alibi-ritual-step:nth-child(even) {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-anatomy-panel:nth-child(even) .home-anatomy-image,
    .alibi-ritual-step:nth-child(even) figure {
        order: 0;
    }

    .home-anatomy-panel:nth-child(odd) .home-anatomy-image::before,
    .alibi-ritual-step:nth-child(odd) figure::before,
    .home-anatomy-panel:nth-child(even) .home-anatomy-image::before,
    .alibi-ritual-step:nth-child(even) figure::before {
        inset: clamp(.7rem, 3vw, 1.1rem);
        border: 1px solid var(--photo-frame);
    }
}
/* #endregion */