/* #region Senses */
.senses-manifest {
    position: relative;
    z-index: 2;
    padding: var(--section-space) 0;
    overflow: hidden;
    border-bottom: 1px solid var(--section-divider);
    background: var(--black);
}

.senses-shell {
    width: min(90vw, var(--section-content-max));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

/* The heading opens what stands under it rather than being held away from it: at eight per cent of the
   window the lead and the first group sit a screen apart on a laptop. */
.senses-header {
    padding-bottom: clamp(2.6rem, 4.4vw, 4.4rem);
}


    .senses-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);
    }

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

    .senses-header > p {
        max-width: 36rem;
        margin: clamp(2rem, 4vh, 3.5rem) 0 0;
        color: var(--text-muted);
        font-size: clamp(1rem, 1.15vw, 1.12rem);
        font-weight: 300;
        line-height: 1.8;
    }

/* The rule between the two columns is the only division this comparison needs. Closing it top
   and bottom as well boxed two lists into a panel in the middle of a section that has no other
   frame — and the lower rule landed a hair above the section's own end. */
.senses-logic {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.senses-logic__group {
    padding: clamp(3rem, 6vw, 6rem) clamp(3rem, 6vw, 6rem) clamp(3rem, 6vw, 6rem) 0;
}

.senses-logic__group--place {
    padding-right: 0;
    padding-left: clamp(3rem, 6vw, 6rem);
    border-left: 1px solid var(--hairline-mid);
}

.senses-logic__group > header {
    display: flex;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: flex-start;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

    .senses-logic__group > header > span {
        color: rgba(var(--gold-rgb),.42);
        font-family: var(--font-display);
        font-size: clamp(3.5rem, 6vw, 6rem);
        font-weight: 300;
        letter-spacing: -.08em;
        line-height: .78;
    }

.senses-logic__group h3 {
    max-width: 13ch;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.5vw, 2.7rem);
    font-weight: 300;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.senses-logic__intro {
    max-width: 34rem;
    min-height: 5.5rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.8;
}

/* The senses stand side by side, not one under another. The group above them states an arithmetic —
   five is three and two — and a column each is what makes that visible; as rows they are five identical
   lines of a table, which is the shape of a specification rather than of a claim about
   what a place can do. Each column opens with the sense, names the product under it and says what
   the sense actually does at the foot. */
.senses-definitions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: clamp(1.4rem, 2.6vw, 2.8rem);
    margin: 0;
}

/* Three and two, stated rather than left to auto-fit: in the 3fr/2fr split the fitted grid gave one
   stacked column on a tablet and three-as-two-plus-one on a laptop, which is the arithmetic undone. */
@media (min-width: 601px) {
    .senses-definitions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .senses-logic__group--place .senses-definitions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

    .senses-definitions > div {
        display: grid;
        align-content: start;
        gap: .55rem;
        padding-top: clamp(1rem, 2vh, 1.4rem);
        border-top: 1px solid var(--hairline);
        transition: border-top-color var(--motion) var(--ease-house);
    }

    /* The rule over a sense lights when it is being read. */
    .senses-definitions > div:hover {
        border-top-color: var(--gold);
    }

    /* The sense is the heading of its card and is set in white. Gold arrives on what points
       somewhere — the product name under it is a link and takes the gold under the hand. */
    .senses-definitions dt {
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 2.2vw, 2.1rem);
        font-weight: 300;
        line-height: 1.1;
    }

        /* The product name sits under its term, quieter than the term itself, so the sense stays the heading. */
        /* Set like the eyebrows the rest of the page uses: capitals, tracked out. These are names of
           products standing under the word each of them answers to, and at sentence case they read
           as a continuation of the definition rather than as the thing being named. */
        /* Picture and name in one link, so the whole card leads where the sense leads. These are the
           ecosystem map's photographs: the two sections are one here. */
        .senses-definitions__product {
            display: block;
            margin-top: clamp(1.1rem, 2vw, 1.6rem);
            color: var(--text-muted);
            font-family: var(--font);
            font-size: .68rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            /* The tracking is added after the final letter too, so the ™ drifts off the name it
               belongs to; sup.tm gives three quarters of it back. */
            --tm-tracking: .18em;
        }

        .senses-definitions__image {
            display: block;
            width: 100%;
            aspect-ratio: 1;
            margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
            object-fit: cover;
            filter: var(--photo-at-rest);
            transition: filter var(--motion-slow) var(--ease-house);
        }

    .senses-definitions dd {
        margin: 0;
        color: var(--text-muted);
        font-size: .92rem;
        line-height: 1.7;
    }

/* The product a sense belongs to, and it leads there. Set as a small caption, but a link all the same: a
   reader who has just learned which product carries „Pamięć" wants to read about it rather than hunt the
   menu for it. */
.senses-definitions__product {
    text-decoration: none;
}

    /* The rule grows under the name and nowhere else. On the link itself — a block the width of the
       whole column — hovering draws a line under empty space the reader is not pointing at. An inline
       span is exactly as wide as the words on it. */
    .senses-definitions__name {
        border-bottom: 1px solid transparent;
        transition: color var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house);
    }

    .senses-definitions__product:hover .senses-definitions__name,
    .senses-definitions__product:focus-visible .senses-definitions__name {
        color: var(--gold);
        border-bottom-color: var(--gold);
    }

    .senses-definitions__product:hover .senses-definitions__image {
        filter: var(--photo-lifted);
    }

/* #endregion */

/* #region Quote */
/* The house lattice runs behind the principle, and it is the hero's own — the same two diagonals at
   the same 72px, faded by the same radial mask — because a second diamond of ours would be a second
   pattern. It lies under the box rather than inside it: what the reader sees around the frame is the
   material the page is printed on, and what is inside the frame is the sentence. */
.manifest-quote-section::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(45deg, transparent calc(50% - .5px), var(--hairline-strong) 50%, transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), var(--hairline-strong) 50%, transparent calc(50% + .5px));
    background-position: center;
    background-size: 72px 72px;
    content: '';
    opacity: .5;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #050505 18%, rgba(5, 5, 5, .72) 58%, transparent 100%);
    mask-image: radial-gradient(ellipse at center, #050505 18%, rgba(5, 5, 5, .72) 58%, transparent 100%);
}

.manifest-quote-section {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--section-space) 5vw;
    /* Ruled on both sides: the house rule is set apart from what runs before and after it. With no line
       above — and no decorative quote glyph overhanging the section — the principle sits directly on the
       ledger. */
    border-top: 1px solid var(--section-divider);
    border-bottom: 1px solid var(--section-divider);
    background: var(--black);
}

/* The principle is mounted like the ledger plate it follows: an edge, a hairline set just inside it,
   and the text close enough to both that the two lines read as an oprawa rather than as a box drawn
   round a paragraph. Not the pictures' passe-partout, which is the wrong mount for type: that hairline is
   fixed about a centimetre in from the edge, which against the wide padding a
   block of text needs left the frame standing four centimetres away from the words, with nothing in
   between. A frame that far from what it frames is an empty frame.

   So the measure is set from the text outwards instead: the inner rule sits .7rem inside the edge and
   the text 2.6–4.2rem inside that. Narrower than the films above it, because a line of type has a
   width at which it stops being readable and 900px is about it. */
.manifest-quote-box {
    position: relative;
    z-index: 1;
    max-width: 900px;
    padding: clamp(2.6rem, 5vw, 4.2rem);
    border: 1px solid var(--hairline-mid);
    /* Opaque, and that is the point: the lattice behind this section has to stop at the frame. A wash
       over a transparent panel would let the diamonds run under the sentence, which is where a
       pattern stops being a material and starts being a distraction. */
    background: linear-gradient(150deg, var(--tint), transparent 58%), var(--black);
    text-align: left;
}

    .manifest-quote-box::after {
        position: absolute;
        z-index: 1;
        inset: .7rem;
        border: 1px solid rgba(245, 245, 245, .06);
        content: '';
        pointer-events: none;
    }

.manifest-quote-tag {
    display: block;
    margin-bottom: 5vh;
    color: rgba(245, 245, 245, .5);
    font-family: var(--font);
    font-size: .65rem;
    letter-spacing: 6px;
    opacity: .8;
    text-transform: uppercase;
}

/* No margin under the last line: the box's own padding is what holds the text off the frame, and a 6vh
   here adds on top of it — the rule then has a hand's width of nothing under it and sits above its own
   centre. */
.manifest-quote-text {
    position: relative;
    z-index: 2;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.5vw, 2.8rem);
    font-weight: 300;
    line-height: 1.5;
}

/* #endregion */

/* #region Responsive */
@media (max-width: 1000px) {
    .senses-header > p {
        max-width: 42rem;
    }

    .manifest-quote-box::before {
        top: -50px;
        left: -10px;
        font-size: 10rem;
    }
}

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

    .senses-logic__group,
    .senses-logic__group--place {
        padding: 4rem 0;
        border-left: 0;
    }

    .senses-logic__group--place {
        border-top: 1px solid var(--hairline-mid);
    }

    .senses-logic__intro {
        min-height: 0;
    }
}

@media (max-width: 600px) {
    .senses-header {
        padding-bottom: 3.5rem;
    }

        .senses-header > p {
            font-size: 1rem;
            line-height: 1.75;
        }

    .senses-logic__group > header {
        display: block;
    }

        .senses-logic__group > header > span {
            display: block;
            margin-bottom: 1.5rem;
        }

    .senses-definitions > div {
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .manifest-quote-text {
        font-size: 1.3rem;
    }
}
/* #endregion */

/* #region Craft — the workshop shown */
/* The house's own section rhythm, from the token every other section uses. Measured in vh rather than vw
   this drifts from its neighbours on every viewport but the one it is tuned at, and with no bottom padding
   the divider that opens the ledger below sits flush against the last frame of the films. */
.manifest-craft {
    padding: var(--section-space) 0;
}

    /* The bare .container carries no inline padding — the 90vw opt-in is the house gutter. */
    .manifest-craft > .container {
        width: min(90vw, var(--section-content-max));
        max-width: none;
        margin-inline: auto;
    }

/* Copy on one side, films on the other. Every other section of this page puts its heading above what
   it shows, so the one section that is itself about looking gets the opposite arrangement — the
   sentence and the proof stand side by side and are read together. The film column is capped rather
   than given a fraction: past about 560px a square of four squares stops being a detail of the
   workshop and starts competing with the page, which is the same reason the row before it keeps to one
   column. */
/* Both columns start at the same line. Centred, the eyebrow floated somewhere against the middle of
   the block and the two columns read as two unrelated things placed side by side; sharing a top edge
   is what makes them one row. */
.manifest-craft-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 7rem);
}

.manifest-craft-heading {
    max-width: 640px;
}

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

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

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

/* The host of the house's closed passe-partout, which is defined once in product-sections.css — this
   file only names .manifest-craft-frame in that rule's selector list. The mount goes around the whole
   block rather than around each film: with four squares touching, one hairline inside the outer edge
   is what says they are one object cut in four rather than four tiles that happen to be adjacent. */
.manifest-craft-frame {
    position: relative;
    overflow: hidden;
}

/* Two by two, held apart by a hairline of the page itself. Edge to edge the four films fought each
   other — two moving pictures sharing a border have no line to stop at, so the eye reads the seam as
   a fault in one image rather than as the edge of two. The gap is deliberately smaller than any
   other on this page: enough to separate the frames, too little to break the block. */
.manifest-craft-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.45rem, .9vw, .85rem);
}

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

    /* No filter on the films: a filter over a playing film is recomputed for every decoded frame, four
       films at once. The grade is in the files themselves. The block answers the pointer as one, through
       its mount, not cell by cell: four squares lighting separately under a moving cursor is a menu, and
       this is one picture. */
    .manifest-craft-piece video {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }

/* The four rise in order, the way every row of cards on this site does — the index comes from the
   view and .visible from site.js, so nothing moves before the visitor reaches the section. */
.manifest-craft-piece {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s ease, transform .9s var(--ease-house);
    transition-delay: calc(var(--card-index, 0) * .09s);
}

.visible .manifest-craft-piece {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .manifest-craft-piece {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Stacked, and still two by two: the block is the point, so it is the one thing that does not become
   a single column. The heading gets its air back here, because it is above the films again. */
@media (max-width: 1000px) {
    .manifest-craft-layout {
        grid-template-columns: 1fr;
    }

    .manifest-craft-heading {
        margin-bottom: var(--section-head-gap);
    }
}
/* #endregion */

/* #region Founder's letter */
/* The signature face, and the one place the house uses a fourth family: it writes the founder's
   name under the manifesto and nothing else. The file is served under /fonts/ with its OFL beside it
   and is listed in THIRD-PARTY-NOTICES.md. font-display: swap keeps the letter from waiting for
   it — the fallback cursive stands in until the face arrives. */
@font-face {
    font-family: 'Parisienne';
    src: url('/fonts/Parisienne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* The house rhythm, from the token every other section reads — see .manifest-craft above. */
.manifest-letter {
    padding: var(--section-space) 0;
}

/* The page's own grid: the eyebrow and the heading stand in the narrow column, the letter itself in
   the wide one — the shape the manifesto and the workshop above already use. The signature is not
   in that column any more: a signature beside a title is a nameplate, and this section is a letter,
   so it is signed under its last line. */
.manifest-letter-inner {
    width: min(90vw, var(--section-content-max));
    max-width: none;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}

.manifest-letter-copy {
    max-width: 62ch;
}

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

/* The section's own heading, at the size and spacing every other section on this page opens with —
   the eyebrow at its own distance, the title in the section face. It stood two sizes down, so the
   letter opened quieter than the sections around it and read as a card inside the page. */

.manifest-letter 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);
}

    .manifest-letter h2 i {
        color: var(--gold);
    }

/* The greeting starts where „Od założyciela" starts. Both columns already begin on the same line —
   this margin was pushing the letter down below its own heading, so the reader's eye had to travel
   back up to find where the writing began. */
.manifest-letter-body {
    margin-top: 0;
}

    .manifest-letter-body p {
        color: var(--white-soft);
        font-weight: 300;
        line-height: 1.85;
    }

        .manifest-letter-body p + p {
            margin-top: 1.2rem;
        }

    /* The greeting is in the same hand as the name at the foot, because that is what a written letter
       is: the two ends are the writer's own and everything between them is the text. It is set a size
       smaller than the signature — a hand signs larger than it greets — and shares the signature's
       slant, since one hand does not change its angle halfway down a page. The selector carries two
       classes on purpose: the paragraph rule above it is a class and an element, and would otherwise
       win and put the greeting back into the body face. */
    .manifest-letter-body .manifest-letter-salutation {
        margin-bottom: 1.6rem;
        color: var(--white);
        font-family: 'Parisienne', cursive;
        font-size: clamp(1.6rem, 2.4vw, 2.2rem);
        font-weight: 400;
        line-height: 1.2;
        transform: rotate(-2deg);
        transform-origin: left bottom;
    }

.manifest-letter-signature {
    margin-top: clamp(2rem, 4vh, 3rem);
}

.manifest-letter-hand {
    display: block;
    color: var(--gold);
    font-family: 'Parisienne', cursive;
    font-size: clamp(2rem, 3vw, 2.7rem);
    line-height: 1.2;
    transform: rotate(-2deg);
    transform-origin: left bottom;
}

.manifest-letter-role {
    display: inline-block;
    margin-top: .6rem;
    border-bottom: 1px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: .74rem;
    font-weight: 300;
    letter-spacing: .1em;
    text-decoration: none;
    transition: color var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house);
}

    /* Inline-block above, so the rule under it is as wide as the line and not as wide as the column. */
    .manifest-letter-role:hover,
    .manifest-letter-role:focus-visible {
        color: var(--gold);
        border-bottom-color: var(--gold);
    }

/* #endregion */