/* #region Atelier page — shell, workshop films and the reveal sequence */
/* The bare .container carries no inline padding, so every band on this page ran edge to edge on any
   screen under 1400px and the copy touched the glass. The hero keeps its own width. */
.atelier-page .container:not(.hero-content) {
    width: min(90vw, var(--section-content-max));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

/* The workshop, on the page that sells work made by hand — the same four films the manifesto runs.
   Four across on a desktop: a hand planing oak at half the page stops being a detail of a workshop
   and starts competing with the section. */
.atelier-craft {
    padding: var(--section-space) 0;
    border-top: 1px solid var(--section-divider);
}

.atelier-craft-heading {
    max-width: 640px;
    margin-bottom: var(--section-head-gap);
}

    .atelier-craft-heading h2 {
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        line-height: 1.12;
    }

        .atelier-craft-heading h2 i {
            color: var(--gold);
        }

    .atelier-craft-heading > p {
        margin-top: var(--section-lead-gap);
        color: var(--white-soft);
        font-weight: 300;
        line-height: 1.75;
    }

.atelier-craft-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.2rem, 2.5vw, 2rem);
}

.atelier-craft-piece {
    margin: 0;
}

    /* Every other film hangs a step lower, so the row reads as a sequence being walked rather than
       as four tiles laid on one line. Four squares at the same height are a contact sheet; the
       offset is what makes it a process. */
    .atelier-craft-piece:nth-child(even) {
        margin-top: clamp(1.5rem, 4vw, 3.5rem);
    }

.atelier-craft-media {
    position: relative;
    overflow: hidden;
}

    /* The mount around each film is the house's closed passe-partout, and it is defined once in
       product-sections.css — this file only has to say that .atelier-craft-media is a host for it,
       which it does by being named in that rule's selector list. Nothing to repeat here. */

    .atelier-craft-piece video,
    .atelier-craft-piece img {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }

    /* A film carries no filter and does not grow under the pointer: either one is recomputed for every
       decoded frame for as long as the film plays, four films at once. The grade is in the files
       themselves, and the mount answering the pointer is the whole hover. A still keeps both. */
    .atelier-craft-piece img {
        filter: var(--photo-at-rest);
        transition: transform 1.8s var(--ease-house), filter var(--motion-slow) var(--ease-house);
    }

    .atelier-craft-piece:hover img {
        transform: scale(1.025);
        filter: var(--photo-lifted);
    }

@media (max-width: 1000px) {
    .atelier-craft-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .atelier-craft-grid {
        grid-template-columns: 1fr;
    }
}

/* One reveal for the whole page: everything that arrives in a row — the four commissions, the four
   films, the four stages of the path, the five seats and what comes with one — rises in order
   rather than appearing all at once. The index is set on the element in the view (--card-index) and
   the .visible class comes from site.js, so nothing here runs before the visitor reaches it. */
.atelier-scope-item,
.atelier-craft-piece,
.atelier-process-steps li,
.atelier-founding-list li {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s var(--ease-house), transform .9s var(--ease-house);
    transition-delay: calc(var(--card-index, 0) * .09s);
}

.visible .atelier-scope-item,
.visible .atelier-craft-piece,
.visible .atelier-process-steps li,
.visible .atelier-founding-list li,
.atelier-craft-grid.visible .atelier-craft-piece {
    opacity: 1;
    transform: none;
}

/* No drawn rule from the first figure to the last — see the steps' own region below. The sequence is
   carried by the figures and by the order they rise in. */

@media (prefers-reduced-motion: reduce) {
    .atelier-scope-item,
    .atelier-craft-piece,
    .atelier-process-steps li,
    .atelier-founding-list li {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .atelier-craft-piece img,
    .atelier-founding-frame img {
        transition: none;
    }
}
/* #endregion */

/* #region Scope — the four kinds of commission, and the path a commission takes */
/* This section does not borrow the pricing grid: two bordered cards each ending in a price-block with
   no price to show hands a reader the shape of an offer and then a list. The scope is a set of four
   peers, so it is set as four peers; the process is a sequence, so it is numbered and runs along a
   single rule. */
.atelier-scope {
    padding: var(--section-space) 0;
    border-top: 1px solid var(--section-divider);
}

/* Four commissions, each shown rather than described, in the square the whole house is built on.
   They were four bordered boxes of type of exactly equal weight, then four product photographs — and
   the photographs were worse: a commission is an axis of the work, so a picture of the Alibi box
   above „Materiał i wykończenie" answered a question nobody asked and closed the one this page opens.
   What stands there now is a drawing. */
.atelier-scope-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.1rem, 1.8vw, 1.8rem);
    margin-top: var(--section-head-gap);
}

.atelier-scope-item {
    display: block;
    min-width: 0;
}

.atelier-scope-frame {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: var(--surface-card);
    transition: border-color var(--motion) var(--ease-house), background-color var(--motion) var(--ease-house);
}

/* The tile answers the pointer the way the samorząd scenario tiles do: the rule warms to a gold that
   can actually be seen and the ground lifts a shade. One hairline at .15 alpha going to another at .20
   with the ground unchanged is a difference nobody can tell has happened. */
.atelier-scope-item:hover .atelier-scope-frame,
.atelier-scope-item:focus-within .atelier-scope-frame {
    border-color: var(--gold-accent);
    background: var(--surface-raised);
}

/* The drawing is the only mark on the frame, so it carries the identity of the card on its own and is
   sized for that rather than as a numeral's substitute. Held to the top-left because the two lines of
   type sit at the foot — the frame reads from its corner down to its floor, with the whole middle left
   empty on purpose. */
.atelier-scope-icon {
    position: absolute;
    top: clamp(1.1rem, 1.8vw, 1.6rem);
    left: clamp(1.1rem, 1.8vw, 1.6rem);
    z-index: 2;
    width: clamp(38px, 3.6vw, 50px);
    color: var(--white-soft);
    opacity: .82;
    transition: opacity var(--motion) var(--ease-house), color var(--motion) var(--ease-house);
}

    .atelier-scope-icon svg {
        display: block;
        width: 100%;
        height: auto;
    }

/* Only the ink answers the pointer, and gold arrives in it. The drawing is anchored in a corner, so it
   has nowhere to lift to — a transform centring it and lifting it a few pixels on hover pushes it out of
   the frame. */
.atelier-scope-item:hover .atelier-scope-icon,
.atelier-scope-item:focus-within .atelier-scope-icon {
    color: var(--gold);
    opacity: 1;
}

/* A watermark, the way the samorząd scenario tiles carry theirs: set far larger than it needs to be,
   pushed past the bottom-right corner so the frame crops it, and drawn as a faint white tint so
   it stays a texture behind the card rather than a figure on it. Behind everything, and out of the
   way of both the drawing above and the type at the foot. */
.atelier-scope-number {
    position: absolute;
    right: -.04em;
    bottom: -.12em;
    z-index: 0;
    color: var(--tint);
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 7vw, 7rem);
    font-weight: 400;
    line-height: .8;
    letter-spacing: -.04em;
    pointer-events: none;
    user-select: none;
    transition: color var(--motion) var(--ease-house);
}

.atelier-scope-item:hover .atelier-scope-number,
.atelier-scope-item:focus-within .atelier-scope-number {
    color: rgba(var(--gold-rgb), .11);
}

.atelier-scope-copy {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: clamp(1.1rem, 1.8vw, 1.6rem);
    /* No gradient lifting this type off its ground: there is no photograph behind it, and over a flat
       black frame a gradient draws nothing at all. */
}

    .atelier-scope-copy h3 {
        margin: 0 0 .5rem;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 1.4vw, 1.45rem);
        font-weight: 300;
        line-height: 1.25;
        text-shadow: 0 2px 18px rgba(5, 5, 5, .55);
    }

    .atelier-scope-copy p {
        margin: 0;
        color: var(--white-soft);
        font-size: .8rem;
        font-weight: 300;
        line-height: 1.55;
    }

@media (max-width: 1100px) {
    .atelier-scope-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .atelier-scope-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The path: four steps that happen in order, so the numbers carry the reading and a single rule
   runs beneath them rather than a border around each. */
/* A band of its own, with the house's rhythm above and below it: nested inside the scope section it reads
   as a footnote under another section's button. */
.atelier-path {
    padding: var(--section-space) 0;
    border-top: 1px solid var(--section-divider);
}

.atelier-process {
    margin-top: var(--section-head-gap);
}

/* A road read downwards, not four columns read across. Set as a row of narrow columns the four stages carry
   the same weight as each other and as the four commissions above them: no focal point, nothing showing that
   one comes after another, and a stage name too small to be a heading. So the sequence IS the layout — one
   full-width row per stage, hung on a vertical rule that runs
   through the four figures and draws itself downwards as the section arrives. Vertical is what makes
   it a road: the gold line tried across the stages read as the axis of a chart, and this one cannot,
   because the marks on it are the stages themselves.

   The figure and the row's own padding are the two numbers the rule has to agree with, so both are
   named here rather than repeated in three places. */
.atelier-process-steps {
    --process-figure: clamp(2.6rem, 3.6vw, 3.4rem);
    --process-row-pad: clamp(1.5rem, 3.2vh, 2.4rem);
    --process-name: clamp(1.3rem, 1.9vw, 1.7rem);
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* From the first figure's centre to the last figure's centre, and nowhere else — a rule that
       overshot at either end would read as a scale the stages sit on rather than as the path
       between them. It fades as it descends, so the section ends rather than being cut off. */
    .atelier-process-steps::before {
        content: "";
        position: absolute;
        top: calc(var(--process-row-pad) + var(--process-figure) / 2);
        bottom: calc(var(--process-row-pad) + var(--process-figure) / 2);
        left: calc(var(--process-figure) / 2);
        width: 1px;
        background: linear-gradient(to bottom, var(--hairline-strong), var(--hairline-faint));
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 1.3s var(--ease-house);
    }

    .atelier-process.visible .atelier-process-steps::before {
        transform: scaleY(1);
    }

    /* The name is a heading here, so it gets a heading's column of its own and a heading's size; the
       third column carries the sentence and what closes the stage.

       The two text columns are measured, not proportional, and a fourth column takes whatever is left
       over. Shared out as fractions they grew with the viewport: on a wide screen the sentence ran to
       a hundred characters a line and sat half a page away from the figure it belongs to, so the eye
       had to cross empty black to get from the stage to what happens in it. Capped, everything stays
       gathered on the left beside the road, and the line length stays a line length. */
    .atelier-process-steps li {
        position: relative;
        display: grid;
        grid-template-columns: var(--process-figure) minmax(0, clamp(8rem, 13vw, 12rem)) minmax(0, clamp(20rem, 33vw, 32rem)) minmax(0, 1fr);
        gap: 0 clamp(.9rem, 1.8vw, 1.8rem);
        align-items: start;
        padding: var(--process-row-pad) 0;
    }

    /* The rule passes behind the figure, so the figure has to sit on the page's own ground rather
       than let the line run through the middle of it. */
    .atelier-process-steps .journey-index {
        width: var(--process-figure);
        background: var(--black);
    }

    .atelier-process-steps strong {
        color: var(--white);
        font-family: var(--font-display);
        font-size: var(--process-name);
        font-weight: 300;
        line-height: 1.15;
    }

    /* The figure is centred on its own square; the name has to sit on the same optical line rather
       than at the top of a box that happens to be taller. Driven by the name's own size, so the two
       cannot drift apart when one of them is tuned. */
    .atelier-process-steps strong,
    .atelier-process-steps .atelier-process-text {
        padding-top: calc((var(--process-figure) - var(--process-name)) / 2);
    }

    /* The house's own body size — the one .explore-intro sets for every section lead — a step down,
       because a lead is still the largest thing in its section. Set below that the stages read as
       small print under a heading twice their size. */
    .atelier-process-text {
        color: var(--text-muted);
        font-size: clamp(.95rem, 1vw, 1rem);
        font-weight: 300;
        line-height: 1.75;
    }

    /* The house's own hover for this figure — the diamond turns square. It is defined once in
       product-sections.css on .journey-step; the stages here are list rows, so the row asks for the
       same behaviour rather than a variant of it. */
    .atelier-process-steps li:hover .journey-index::before,
    .atelier-process-steps li:hover .journey-index::after {
        border-color: var(--gold);
        transform: rotate(0deg);
    }

    /* One named fact per stage, under a rule running the full width of the column: the shape of a
       footer, which is what it is. Not an unlabelled sentence set entirely in gold: a line in another
       colour with no name on it makes the reader work out what kind of thing it is before they can read
       it, and „what closes the stage" is not something a reader should have to infer. The label answers
       that in one word, so the label is what gold arrives on under the hand and the fact is set as text. */
    .atelier-process-close {
        position: relative;
        grid-column: 3;
        margin-top: 1.15rem;
        padding-top: 1.1rem;
        color: var(--white-soft);
        font-size: .78rem;
        font-weight: 300;
        line-height: 1.7;
        opacity: .85;
        transition: opacity var(--motion) var(--ease-house);
    }

        /* The house's eyebrow, inline and at an inline size — .h-tag's own 8px tracking is set for a
           label standing alone on its line and would tear a word apart in the middle of a sentence.
           The separator is drawn here rather than written into the copy: a translator should be
           handing over a word and a sentence, not the punctuation that joins them. */
        .atelier-process-close b {
            color: rgba(245, 245, 245, .5);
            font-family: var(--font-mono);
            font-size: .63rem;
            font-weight: 400;
            letter-spacing: .16em;
            text-transform: uppercase;
            transition: color var(--motion) var(--ease-house);
        }

            .atelier-process-close b::after {
                content: "·";
                margin: 0 .55em 0 .5em;
                color: var(--white-ghost);
                letter-spacing: 0;
            }

        .atelier-process-close::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: var(--hairline-mid);
            transition: background-color var(--motion) var(--ease-house);
        }

    .atelier-process-steps li:hover .atelier-process-close {
        opacity: 1;
    }

        .atelier-process-steps li:hover .atelier-process-close b {
            color: var(--gold);
        }

        .atelier-process-steps li:hover .atelier-process-close::before {
            background: rgba(var(--gold-rgb),.45);
        }

/* Two columns instead of three: the name moves above its own sentence, and the road stays. The
   figure column never collapses, because it is what carries the rule. */
@media (max-width: 900px) {
    .atelier-process-steps li {
        grid-template-columns: var(--process-figure) minmax(0, 34rem) minmax(0, 1fr);
        gap: 0 clamp(1rem, 4vw, 1.6rem);
    }

    .atelier-process-steps strong,
    .atelier-process-steps .atelier-process-text,
    .atelier-process-close {
        grid-column: 2;
    }

    .atelier-process-steps .atelier-process-text {
        margin-top: .5rem;
        padding-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .atelier-process-close,
    .atelier-process-close::before {
        transition: none;
    }

    .atelier-process-steps::before {
        transform: scaleY(1);
        transition: none;
    }
}


/* #region The Founding Five */
.atelier-founding {
    padding: var(--section-space) 0;
    border-top: 1px solid var(--section-divider);
}

/* The five seats, numbered the way the certificate numbers them. This is the whole idea of the
   programme — a count, and a small one — so it is shown rather than described. */
/* The argument on one side, the object on the other — the layout the house uses wherever it has a
   thing to show rather than a claim to make. */
.atelier-founding-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}


.atelier-founding-copy 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);
}

    .atelier-founding-copy h2 i {
        color: var(--gold);
        font-weight: 300;
    }

.atelier-founding-lead {
    max-width: 40rem;
    margin: clamp(1.6rem, 3vh, 2.4rem) 0 0;
    color: var(--text-muted);
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    font-weight: 300;
    line-height: 1.8;
}

/* The certificate, photographed — nothing here draws it. The figures and the frame are in the picture,
   made by the workshop that makes the object. */
/* Frame and mount, the same pair the workshop steps and the craft films carry — the certificate is a
   photograph of a hand-made object, so it sits in what such a photograph sits in. The hairline itself
   is the house's closed passe-partout, defined once in product-sections.css; this element is named in
   that rule's selector list, which is the whole of what it takes to have one. */
.atelier-founding-frame {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--black);
}

    .atelier-founding-frame img {
        display: block;
        width: 100%;
        height: auto;
        filter: var(--photo-at-rest);
        transform: scale(1.005);
        transition: transform 1.8s var(--ease-house), filter var(--motion-slow) var(--ease-house);
    }

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

@media (max-width: 900px) {
    .atelier-founding-inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* What comes with a seat, set the way the four commissions above are set: one card each. As four dashed lines
   under five large numerals they are small print beneath the only part of the section anybody can see, which
   leaves the section's own subject — what the honour actually is — the quietest thing on it. */
/* What the honour carries, one provision to a line, each on its own hairline beside the photograph
   of the thing they describe. */
.atelier-founding-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: clamp(1.8rem, 3.4vh, 2.6rem) 0 0;
    padding: 0;
    list-style: none;
}

    .atelier-founding-list li {
        position: relative;
        padding: clamp(1rem, 2vh, 1.5rem) 0 clamp(1rem, 2vh, 1.5rem) 1.7rem;
        border-bottom: 1px solid var(--hairline);
        color: var(--white-soft);
        font-size: .92rem;
        font-weight: 300;
        line-height: 1.7;
        transition: opacity .8s var(--ease-house), transform .9s var(--ease-house);
    }

        /* The house's mark, small, in front of each provision. */
        .atelier-founding-list li::before {
            position: absolute;
            top: calc(clamp(1rem, 2vh, 1.5rem) + .5em);
            left: 0;
            width: 6px;
            height: 6px;
            border: 1px solid var(--gold);
            content: "";
            transform: rotate(45deg);
        }

        .atelier-founding-list li:last-child {
            border-bottom: 0;
        }

/* #endregion */