/* ==========================================================================
   MEZA — shared design system
   Paleta i typografia wspólne dla wszystkich stron.
   ========================================================================== */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #111310;
    --ink-deep: #0b0c0a;
    --ink-lift: #171a15;
    --sage: #78846c;
    --sage-deep: #4d5445;
    --sage-pale: #b8bfb1;
    --paper: #fafafa;

    --line: rgba(250, 250, 250, .085);
    --line-strong: rgba(250, 250, 250, .16);
    --body-fg: rgba(250, 250, 250, .72);
    --muted-fg: rgba(250, 250, 250, .55);

    --pad-x: clamp(1.375rem, 5.5vw, 5.5rem);
    --shell: 110rem;
    --nav-h: 4.5rem;
    --rail: clamp(6.75rem, 9vw, 9rem);
    --rail-pad: clamp(1.25rem, 3vh, 2rem);
    --ease: cubic-bezier(.16, 1, .3, 1);

    /* one grade for the architecture photography */
    --grade: saturate(.62) contrast(1.05) brightness(.9);
    /* people carry colours the palette has no answer for — the teal workwear,
       a summer sky — so portraits go one step further down */
    --grade-figure: saturate(.4) contrast(1.08) brightness(.88);

    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-padding-top: calc(var(--nav-h) + 1.5rem);
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--ink);
    color: var(--paper);
    font-family: 'Montserrat', 'Helvetica Neue', Arial, system-ui, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    cursor: crosshair;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

a {
    color: inherit;
    text-decoration: none;
    /* overrides the UA's a:any-link pointer — no hand cursor anywhere */
    cursor: crosshair;
}

img {
    max-width: 100%;
    /* Zdjęcia nie są do zabrania: bez tego przeglądarka pozwala odciągnąć sam
       kadr jak plik, a w pasie wygląda to jak zepsute przewijanie. */
    -webkit-user-drag: none;
}

:focus-visible {
    outline: 1px solid var(--sage-pale);
    outline-offset: .35rem;
}

/* contact details are the one thing people genuinely need to copy */
.selectable,
.selectable * {
    -webkit-user-select: text;
    user-select: text;
}

/* ---------- atmosphere (tło wspólne dla wszystkich stron) ---------- */

.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(120, 132, 108, .07), transparent 60%),
        linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
}

.glow {
    position: absolute;
    width: min(125vw, 1180px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(20px);
    will-change: transform;
}

.glow--a {
    top: -46vh;
    right: -24vw;
    background: radial-gradient(circle, rgba(120, 132, 108, .30), rgba(120, 132, 108, 0) 64%);
    animation: drift 27s var(--ease) infinite alternate;
}

.glow--b {
    bottom: -46vh;
    left: -30vw;
    width: min(105vw, 900px);
    background: radial-gradient(circle, rgba(77, 84, 69, .42), rgba(77, 84, 69, 0) 66%);
    animation: drift 34s var(--ease) -9s infinite alternate-reverse;
}

@keyframes drift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-5vw, 6vh, 0) scale(1.14);
    }
}

.rules {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* siatka rysuje się z góry na dół, kolumna po kolumnie — pierwszy ruch, jaki
   widzi odwiedzający, jeszcze przed treścią */
.rules i {
    border-right: 1px solid var(--line);
    transform: scaleY(0);
    transform-origin: top;
    animation: drawDown 1.6s var(--ease) both;
}

.rules i:nth-child(1) {
    animation-delay: .1s;
}

.rules i:nth-child(2) {
    animation-delay: .22s;
}

.rules i:nth-child(3) {
    animation-delay: .34s;
}

.rules i:last-child {
    border-right: 0;
}

@keyframes drawDown {
    to {
        transform: scaleY(1);
    }
}

.grain {
    position: absolute;
    inset: -20%;
    opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- pointer reticle ---------- */

.reticle {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.reticle.is-on {
    opacity: 1;
}

.reticle span {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(120, 132, 108, .62);
    will-change: transform;
}

.reticle__h {
    width: 100%;
    height: 1px;
}

.reticle__v {
    width: 1px;
    height: 100%;
}

/* The crosshair lies under the page, so a photograph or a block of text hides
   it. A second, fainter pass runs over the top: full strength on bare ground,
   a trace across anything laid on it — the pointer keeps its line without
   cutting through the picture. */
.reticle--over {
    z-index: 30;
}

.reticle--over span {
    background: rgba(184, 191, 177, .24);
}

/* ---------- shell ---------- */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

.page {
    position: relative;
    z-index: 2;
}

section {
    padding-block: clamp(3.5rem, 9vh, 8rem);
}

section + section {
    border-top: 1px solid var(--line);
}

/* ---------- type ---------- */

.caps {
    font-size: clamp(.625rem, 1vw, .75rem);
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted-fg);
}

.caps--sage {
    color: var(--sage-pale);
}

.display {
    margin: 0;
    max-width: 18ch;
    font-size: clamp(2.5rem, 7vw, 5.75rem);
    font-weight: 200;
    line-height: .98;
    letter-spacing: .01em;
    /* keeps a long statement from ending on an orphan */
    text-wrap: balance;
}

.h2 {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 3.25rem);
    font-weight: 200;
    line-height: 1.05;
    letter-spacing: .01em;
}

.h3 {
    margin: 0;
    font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: .01em;
}

.lead {
    margin: 0;
    max-width: 34ch;
    font-size: clamp(1.0625rem, 1.9vw, 1.5rem);
    font-weight: 200;
    line-height: 1.5;
    color: var(--sage-pale);
}

.prose p {
    margin: 0 0 1.15em;
    max-width: 62ch;
    font-size: clamp(.9375rem, 1.2vw, 1.0625rem);
    line-height: 1.8;
    color: var(--body-fg);
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose strong,
.prose b {
    font-weight: 500;
    color: var(--paper);
}

.hr {
    height: 1px;
    border: 0;
    margin: clamp(1.75rem, 4vh, 2.75rem) 0;
    width: min(100%, 30rem);
    background: linear-gradient(90deg, var(--sage) 0%, rgba(120, 132, 108, .18) 55%, transparent 100%);
}

/* ---------- nav ---------- */

.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: background .4s var(--ease), border-color .4s var(--ease),
        backdrop-filter .4s var(--ease);
    animation: rise 1.1s var(--ease) .1s both;
}

.nav.is-stuck {
    background: rgba(11, 12, 10, .72);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border-bottom-color: var(--line);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lockup {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: none;
}

.mark {
    width: 2.125rem;
    height: 2.125rem;
    flex: none;
    border-radius: 50%;
    background: var(--sage);
    color: var(--paper);
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1;
    letter-spacing: .01em;
    transition: background .5s var(--ease), color .5s var(--ease);
}

.lockup:hover .mark,
a.mark:hover {
    background: var(--sage-pale);
    color: var(--ink);
}

.lockup__text {
    font-size: clamp(.6875rem, 1vw, .8125rem);
    font-weight: 500;
    letter-spacing: .22em;
    white-space: nowrap;
}

.lockup__text em {
    font-style: normal;
    color: var(--sage);
}

.nav__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1.25rem, 3.5vw, 2.75rem);
}

/* the place tag is a nicety, not information — it is the first thing to go
   when the bar gets tight */
.nav__place {
    display: none;
}

@media (min-width: 40rem) {
    .nav__place {
        display: inline;
    }
}

.nav__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem clamp(1.125rem, 2.5vw, 2rem);
}

.nav__links a {
    position: relative;
    font-size: clamp(.625rem, 1vw, .75rem);
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted-fg);
    padding-block: .4rem;
    transition: color .4s var(--ease);
}

.nav__links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--sage);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.nav__links a:hover {
    color: var(--paper);
}

.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav__links a[aria-current="page"],
.nav__links a[aria-current="location"] {
    color: var(--sage-pale);
}

/* "Kontakt" is a section of "O nas", not a page of its own — ARIA says as
   much, so the page link keeps aria-current="page" for screen readers. But
   two lit links read as a bug, so while you are down in the section the
   section link carries the mark alone. */
.nav__links a[aria-current="location"]::after {
    transform: scaleX(1);
}

.nav__links.is-at-section a[aria-current="page"] {
    color: var(--muted-fg);
}

.nav__links.is-at-section a[aria-current="page"]:not(:hover)::after {
    transform: scaleX(0);
}

/* ---------- the rail (desktop only) ---------- */

/* From 64rem up the bar stands on its edge: a narrow fixed column at the left,
   mark at the top, the menu centred in the height of the page, the place tag
   set vertically at the foot. Below that width there is no room for a column,
   so it lies back down as the bar above. */

@media (min-width: 64rem) {
    html {
        scroll-padding-top: 1.5rem;
    }

    .nav {
        inset: 0 auto 0 0;
        width: var(--rail);
        height: 100%;
        border-bottom: 0;
        border-right: 1px solid var(--line);
        padding-block: var(--rail-pad);
    }

    /* the backdrop is for content sliding under a top bar; nothing slides
       under the rail */
    .nav.is-stuck {
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 0;
    }

    .nav__inner {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
        padding-inline: 0;
        max-width: none;
    }

    /* pinned, so the menu centres on the page and not on what is left below
       the mark */
    .nav .mark {
        position: absolute;
        top: var(--rail-pad);
        left: 50%;
        transform: translateX(-50%);
    }

    .nav__end {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 0;
    }

    .nav__links {
        flex-direction: column;
        align-items: center;
        gap: clamp(.875rem, 2.2vh, 1.375rem);
    }

    .nav__place {
        position: absolute;
        left: 50%;
        bottom: var(--rail-pad);
        writing-mode: vertical-rl;
        transform: translateX(-50%) rotate(180deg);
    }

    /* the page moves over to make room */
    .page {
        padding-left: var(--rail);
    }

    /* nothing overhead any more */
    .hero {
        padding-top: clamp(3.5rem, 14vh, 9rem);
    }
}

/* ---------- hero ---------- */

.hero {
    padding-top: calc(var(--nav-h) + clamp(3.5rem, 14vh, 9rem));
    padding-bottom: clamp(3rem, 8vh, 6rem);
    /* treść hero wchodzi po siatce i wordmarku, nie razem z nimi */
    --d: .28s;
}

/* The wordmark stays present without taking the first look: a ghost in a tone
   barely off the ground, with the statement lying on it. It sits in flow, not
   pinned to the viewport — so the statement overlaps the letters by the same
   fraction of their own size on every screen. */
.hero__ghost {
    position: relative;
    z-index: 0;
    display: block;
    margin: -.18em 0 -.5em;
    /* sized to the column, so the letters run the width of the page and the
       last one is cut by the edge */
    font-size: clamp(5rem, 24vw, 26rem);
    font-weight: 200;
    line-height: .86;
    color: rgba(250, 250, 250, .055);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.hero__ghost-letters {
    display: block;
    letter-spacing: .11em;
    white-space: nowrap;
}

/* wordmark ostrzy się z rozmycia, litera po literze — ten sam ruch prowadzi
   stronę główną meza.studio */
.hero__ghost-letters > * {
    display: inline-block;
    animation: focusIn 1.5s var(--ease) both;
}

.hero__ghost-letters > *:nth-child(1) {
    animation-delay: .34s;
}

.hero__ghost-letters > *:nth-child(2) {
    animation-delay: .44s;
}

.hero__ghost-letters > *:nth-child(3) {
    animation-delay: .54s;
}

.hero__ghost-letters > *:nth-child(4) {
    animation-delay: .64s;
}

@keyframes focusIn {
    from {
        opacity: 0;
        transform: translateY(.22em);
        filter: blur(18px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

.hero__ghost-letters em {
    font-style: normal;
    letter-spacing: 0;
    color: rgba(120, 132, 108, .16);
}

/* the sub keeps the lockup's own construction: below the letters, flushed to
   their right edge — never alongside them */
.hero__ghost-sub {
    display: block;
    margin-top: .3em;
    text-align: right;
    font-size: .16em;
    letter-spacing: .44em;
    color: rgba(184, 191, 177, .13);
    animation: rise 1.2s var(--ease) .8s both;
}

.hero > *:not(.hero__ghost) {
    position: relative;
    z-index: 1;
}

/* the lead states the offer, the prose qualifies it — they need air between */
.hero .prose {
    margin-top: clamp(1rem, 2.5vh, 1.5rem);
}

/* the lead states the offer, the prose qualifies it — they need air between */
.hero .prose {
    margin-top: clamp(1rem, 2.5vh, 1.5rem);
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 clamp(1.25rem, 4vh, 2.5rem);
}

.pulse {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--sage);
    animation: pulse 2.6s ease-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(120, 132, 108, .55);
    }

    60% {
        box-shadow: 0 0 0 9px rgba(120, 132, 108, 0);
    }
}

/* ---------- image plate ---------- */

/* Photography sits inside the page margins, on the drafting grid, inside a
   thin offset rule — a plate in a portfolio rather than a banner. One grade
   for every photograph on the site, architecture and portraits alike. */

.plate {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: 100%;
    max-width: var(--shell);
    padding: clamp(1rem, 3vh, 2rem) var(--pad-x) clamp(2.5rem, 6vh, 4.5rem);
}

.plate__frame {
    position: relative;
}

/* the rule is offset up and to the right, so the photo reads as laid on top
   of it rather than boxed in by it */
.plate__frame::before {
    content: "";
    position: absolute;
    inset: -.875rem -.875rem .875rem .875rem;
    border: 1px solid rgba(120, 132, 108, .42);
    pointer-events: none;
}

.plate img {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 74vh;
    object-fit: cover;
    filter: var(--grade);
}

.plate figcaption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem clamp(1.25rem, 3vw, 2.5rem);
    margin-top: clamp(1.25rem, 3vh, 1.75rem);
}

/* ---------- numbered steps ---------- */

/* the steps now live inside a section that already has a heading */
.steps-lead {
    margin-top: clamp(2.5rem, 6vh, 4rem);
}

.steps-wrap {
    position: relative;
}

.track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: var(--line-strong);
}

.track__fill {
    display: block;
    width: 100%;
    height: 0;
    background: var(--sage);
    box-shadow: 0 0 12px rgba(120, 132, 108, .45);
}

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.step {
    display: grid;
    grid-template-columns: clamp(2.75rem, 7vw, 5.5rem) 1fr;
    gap: clamp(1rem, 3.5vw, 3rem);
    align-items: start;
    padding: clamp(1.75rem, 4.5vh, 3rem) 0 clamp(1.75rem, 4.5vh, 3rem) clamp(1rem, 2.5vw, 2rem);
    border-top: 1px solid var(--line);
}

.step:last-child {
    border-bottom: 1px solid var(--line);
}

.step__no {
    font-size: clamp(1.25rem, 2.8vw, 2.25rem);
    font-weight: 200;
    line-height: 1;
    color: var(--sage);
    letter-spacing: .02em;
}

.step__body p {
    margin: .7em 0 0;
    max-width: 58ch;
    font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
    line-height: 1.75;
    color: var(--body-fg);
}

/* ---------- two-column editorial block ---------- */

.split {
    display: grid;
    gap: clamp(1.75rem, 5vw, 4.5rem);
}

@media (min-width: 60rem) {
    .split {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    }

    .split__aside {
        position: sticky;
        top: calc(var(--nav-h) + 2.5rem);
        align-self: start;
    }
}

.split__aside .caps {
    display: block;
    margin-bottom: 1rem;
}

/* Both halves of the partnership carry the same weight in the column: the
   builder as a photograph, the practice as its own wordmark — each on a plate
   of the same family, signed in the same corner. */
.markplate {
    position: relative;
    display: grid;
    place-items: center;
    margin: clamp(1.25rem, 3vh, 1.75rem) .625rem 0 0;
    aspect-ratio: 1 / 1;
    background: var(--ink-lift);
}

.markplate::before {
    content: "";
    position: absolute;
    inset: -.625rem -.625rem .625rem .625rem;
    border: 1px solid rgba(120, 132, 108, .42);
    pointer-events: none;
}

.markplate__mark {
    position: absolute;
    left: clamp(.875rem, 4%, 1.25rem);
    bottom: clamp(.875rem, 4%, 1.25rem);
}

.wordmark {
    display: inline-block;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 200;
    line-height: .9;
}

.wordmark__letters {
    display: block;
    letter-spacing: .1em;
}

.wordmark__letters span:last-child {
    letter-spacing: 0;
    color: var(--sage);
}

.wordmark__sub {
    display: block;
    margin-top: .4em;
    text-align: right;
    /* .22em alone collapses to ~7px on phones — keep an absolute floor */
    font-size: max(.6875rem, .22em);
    font-weight: 200;
    letter-spacing: .38em;
    color: var(--sage-pale);
}

/* the portrait is the same plate, one size down */
.portrait {
    margin: clamp(1.25rem, 3vh, 1.75rem) .625rem 0 0;
    max-width: 100%;
}

.portrait__frame {
    position: relative;
}

.portrait__frame::before {
    content: "";
    position: absolute;
    inset: -.625rem -.625rem .625rem .625rem;
    border: 1px solid rgba(120, 132, 108, .42);
    pointer-events: none;
}

.portrait img {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    filter: var(--grade-figure);
}

/* the mark is stamped into the frame, over a scrim that keeps it legible
   whatever the crop underneath does */
.portrait__frame::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(4.5rem, 22%, 7rem);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 12, 10, 0), rgba(11, 12, 10, .82));
}

/* ---------- two ways in ---------- */

/* The home page offers exactly two doors — a finished design, or the whole
   process. They are built as plates, so they belong to the same family as the
   photography elsewhere on the site. */

.paths {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4.5rem);
}

@media (min-width: 48rem) {
    .paths {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.path {
    display: block;
}

.path__frame {
    display: block;
    position: relative;
    margin-bottom: clamp(1.25rem, 3vh, 1.75rem);
}

.path__frame::before {
    content: "";
    position: absolute;
    inset: -.875rem -.875rem .875rem .875rem;
    border: 1px solid rgba(120, 132, 108, .42);
    pointer-events: none;
    transition: border-color .5s var(--ease);
}

/* The two doors are drawn, not photographed — the photographs belong to the
   houses below, and repeating them here would say the same thing twice. */
.path__icon {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    background: var(--ink-lift);
    fill: none;
    stroke-linecap: square;
    vector-effect: non-scaling-stroke;
}

.path__icon .path__grid {
    stroke: rgba(250, 250, 250, .06);
    stroke-width: 1;
}

.path__icon .path__line {
    stroke: rgba(184, 191, 177, .62);
    stroke-width: 1.5;
    transition: stroke .5s var(--ease);
}

.path__icon .path__aux {
    stroke: rgba(120, 132, 108, .7);
    stroke-width: 1;
}

.path__no {
    display: block;
}

.path__title {
    display: block;
    margin-top: .625rem;
}

.path__note {
    display: block;
    margin-top: .875rem;
    max-width: 38ch;
    font-size: clamp(.9375rem, 1.2vw, 1.0625rem);
    line-height: 1.7;
    color: var(--body-fg);
}

.path__go {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    margin-top: clamp(1rem, 2.5vh, 1.375rem);
    color: var(--sage-pale);
    transition: color .4s var(--ease);
}

.path__go i {
    font-style: normal;
    transition: transform .45s var(--ease);
}

.path:hover .path__frame::before {
    border-color: var(--sage-pale);
}

.path:hover .path__icon .path__line {
    stroke: var(--paper);
}

.path:hover .path__go {
    color: var(--paper);
}

.path:hover .path__go i {
    transform: translateX(.35em);
}

/* ---------- the houses ---------- */

.houses {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    margin-top: clamp(2.5rem, 6vh, 4rem);
}

@media (min-width: 48rem) {
    .houses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.house {
    display: block;
}

.house__frame {
    display: block;
    position: relative;
}

.house__frame::before {
    content: "";
    position: absolute;
    inset: -.875rem -.875rem .875rem .875rem;
    border: 1px solid rgba(120, 132, 108, .42);
    pointer-events: none;
    transition: border-color .5s var(--ease);
}

.house__frame img {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    filter: var(--grade);
    transition: filter .6s var(--ease);
}

.house__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem clamp(1.25rem, 3vw, 2.5rem);
    margin-top: clamp(1.25rem, 3vh, 1.75rem);
}

.house__soon {
    display: block;
    margin-top: .5rem;
    color: var(--sage);
}

a.house:hover .house__frame::before {
    border-color: var(--sage-pale);
}

a.house:hover .house__frame img {
    filter: saturate(.78) contrast(1.04) brightness(.98);
}

/* ---------- gallery ---------- */

.gallery {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    margin-top: clamp(2.5rem, 6vh, 4rem);
}

@media (min-width: 48rem) {
    .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.shot {
    margin: 0 .625rem 0 0;
}

/* Ramka trzyma się samego zdjęcia — nie obejmuje podpisu i nie rozciąga się na
   szerokość figury, więc przy każdej proporcji odsunięcie jest takie samo. */
.shot__frame {
    position: relative;
    width: fit-content;
}

.shot__frame::before {
    content: "";
    position: absolute;
    inset: -.625rem -.625rem .625rem .625rem;
    border: 1px solid rgba(120, 132, 108, .42);
    pointer-events: none;
}

.shot img {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    filter: var(--grade);
}

/* ---------- gallery A: taśma ---------- */

/* Wychodzi za prawą krawędź strony — kadr ucięty krawędzią mówi, że pas
   jedzie dalej, bez strzałek i kropek. */

.gallery__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
    margin-top: 1rem;
}

.meter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
}

@media (min-width: 48rem) {
    .meter {
        align-items: flex-end;
    }
}

.meter__count {
    margin: 0;
    color: var(--paper);
    letter-spacing: .18em;
}

.meter__track {
    display: block;
    width: clamp(7rem, 14vw, 12.5rem);
    height: 1px;
    background: var(--line-strong);
}

.meter__track i {
    display: block;
    width: 25%;
    height: 1px;
    background: var(--sage-pale);
    transition: transform .4s var(--ease);
}

/* Nie sam napis, a przycisk: strzałka obiecuje ruch, więc go daje — bez niej
   pas jedzie tylko gestem, którego na myszce bez kółka poziomego nie ma. */
.meter__hint {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: clamp(.625rem, 1vw, .75rem);
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted-fg);
    cursor: crosshair;
    transition: color .4s var(--ease);
}

.meter__hint:hover {
    color: var(--sage-pale);
}

.rail {
    --rail-h: clamp(15rem, 44vh, 29rem);
    display: flex;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    /* górny margines idzie w padding: ramka wystaje nad zdjęcie o .625rem, a
       przewijany kontener ucina wszystko poza swoim polem */
    margin-top: calc(clamp(2rem, 5vh, 3rem) - .75rem);
    padding: .75rem var(--pad-x) clamp(1.25rem, 3vh, 2rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.rail::-webkit-scrollbar {
    display: none;
}

/* Na czas ciągnięcia zatrzaski są wyłączone: walczą z ręcznie ustawianym
   scrollLeft i pas stoi w miejscu zamiast jechać za kursorem. Wracają, gdy pas
   się zatrzyma, więc kadr i tak kończy równo z krawędzią. */
.rail--free {
    scroll-snap-type: none;
}

/* min-content: figura jest tak szeroka jak zdjęcie, podpis zawija się pod nim
   zamiast ją rozpychać. */
.rail .shot {
    flex: none;
    width: min-content;
    max-width: 82vw;
    scroll-snap-align: start;
    margin-bottom: 0;
}

/* Jedna wysokość dla całego pasa, szerokość z proporcji zdjęcia: kadr pionowy
   jest po prostu węższy, nie przycięty. Proporcja idzie z --shot-ar w znaczniku,
   żeby miejsce na kadr było znane, zanim leniwe zdjęcie się doczyta — inaczej
   pas składa się do zera. */
.rail .shot img {
    width: auto;
    max-width: 82vw;
    height: var(--rail-h);
    aspect-ratio: var(--shot-ar, 3 / 2);
    object-fit: contain;
}

/* Na telefonie odwrotnie: szerokość bierze pas, wysokość idzie z proporcji —
   inaczej wysoki kadr wisiałby w ramce z pustymi bokami. */
@media (max-width: 47.99rem) {
    .rail .shot img {
        width: 82vw;
        max-width: none;
        height: auto;
    }
}

/* Oznaczenie nośnika przed nazwą kadru: WIZ. dla wizualizacji, FOT. dla
   zdjęć zrealizowanych budynków. Ciszej i bez półpauzy — numeracja "01 —"
   należy do sekcji strony, a to jest pozycja w serii obrazów, nie rozdział. */
.fig {
    margin-right: .75em;
    color: rgba(250, 250, 250, .32);
    font-size: .9em;
    white-space: nowrap;
}

.shot__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem 1.5rem;
    margin-top: 1rem;
}

/* ---------- drawing viewer ---------- */

/* One sheet at a time. The drawings come on paper, so the sheet stays paper —
   the controls above it belong to the page and stay in its own language. */

.viewer {
    margin-top: clamp(2.5rem, 6vh, 4rem);
}

.viewer__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
    padding-bottom: clamp(.5rem, 1.2vh, .875rem);
    border-bottom: 1px solid var(--line);
}

.viewer__tabs,
.viewer__switches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem clamp(1rem, 2.5vw, 1.75rem);
}

.viewer button {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: clamp(.625rem, 1vw, .75rem);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted-fg);
    cursor: crosshair;
    transition: color .4s var(--ease), opacity .4s var(--ease);
}

.viewer button:hover:not(:disabled) {
    color: var(--paper);
}

.viewer__tabs button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.35rem;
    height: 1px;
    background: var(--sage);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}

.viewer__tabs button[aria-selected="true"] {
    color: var(--sage-pale);
}

.viewer__tabs button[aria-selected="true"]::after,
.viewer__tabs button:hover::after {
    transform: scaleX(1);
}

/* the switches read as ticked boxes on a drawing sheet */
.switch {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
}

.switch__box {
    width: .875rem;
    height: .875rem;
    flex: none;
    border: 1px solid var(--line-strong);
    transition: border-color .4s var(--ease), background .4s var(--ease);
}

.switch[aria-pressed="true"] {
    color: var(--sage-pale);
}

.switch[aria-pressed="true"] .switch__box {
    border-color: var(--sage);
    background:
        linear-gradient(45deg, transparent 42%, var(--sage) 42%, var(--sage) 58%, transparent 58%),
        linear-gradient(-45deg, transparent 42%, var(--sage) 42%, var(--sage) 58%, transparent 58%);
}

.switch:disabled {
    opacity: .32;
    cursor: not-allowed;
}

.viewer__sheet {
    margin: clamp(.25rem, .8vh, .5rem) 0 0;
}

/* Sized by height, not by width: a whole drawing should fit on a laptop
   screen without scrolling. Nothing shows around it — the ground is
   transparent — so the spare width on either side costs nothing. */
.viewer__field {
    --field-h: clamp(16rem, 52vh, 30rem);
    display: grid;
    place-items: center;
    height: var(--field-h);
}

/* The drawings ship as white ink with a transparent ground — the paper was
   taken out of the files themselves, so nothing here has to blend. Doing it
   in CSS would have left a black rectangle: .page isolates its layer, so a
   screen blend never reaches the page's own background. */
.viewer__field img {
    display: block;
    /* bounded on both axes, aspect kept. Percentages against the grid area
       did not resolve here — the drawing kept overflowing — so the cap is
       stated in the same length the field is built from. */
    max-width: 100%;
    max-height: var(--field-h);
    width: auto;
    height: auto;
}

.viewer__sheet figcaption {
    margin-top: clamp(.875rem, 2vh, 1.125rem);
}

/* ---------- section drawing ---------- */

/* The section ships with a transparent ground — only the line work is painted.
   We use it as an alpha mask so the line work takes the sage tone rather than
   whatever grey the file happens to carry. */
.cut {
    margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
}

/* the section earns a wider column than a label alone would need */
@media (min-width: 60rem) {
    .split--cut {
        grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
    }
}

.cut__frame {
    position: relative;
}

/* the raster only holds the box open; the tinted mask paints the line work */
.cut__frame img {
    display: block;
    width: 100%;
    height: auto;
    visibility: hidden;
}

/* --cut-src is set per page; its url() resolves against this stylesheet */
.cut__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sage-pale);
    -webkit-mask: var(--cut-src) 0 0 / 100% 100% no-repeat;
    mask: var(--cut-src) 0 0 / 100% 100% no-repeat;
}

.cut figcaption {
    margin-top: .75rem;
}

/* ---------- technical data ---------- */

/* Numbers read as a table of figures, on the same hairlines as the steps */
.specs {
    margin: 0;
    display: grid;
    gap: 0;
}

@media (min-width: 48rem) {
    .specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(1.5rem, 4vw, 3rem);
    }
}

/* label left, figure right — the label wraps inside its own column so the
   figures stay on one line and read as a column of numbers */
.specs > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .35rem 1.25rem;
    padding: .875rem 0;
    border-top: 1px solid var(--line);
}

.specs dt {
    color: var(--muted-fg);
}

.specs dd {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    font-weight: 200;
    letter-spacing: .01em;
}

/* ---------- contact calls ---------- */

.calls {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-top: clamp(1.75rem, 4vh, 2.5rem);
}

/* ---------- data list ---------- */

.data {
    display: grid;
    gap: clamp(1.75rem, 5vw, 4rem);
}

@media (min-width: 48rem) {
    .data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.data__group {
    border-top: 1px solid var(--line-strong);
    padding-top: clamp(1rem, 2.5vh, 1.5rem);
}

.data__group .caps {
    display: block;
    margin-bottom: clamp(1rem, 2.5vh, 1.5rem);
}

.data__co {
    margin: 0 0 1.25rem;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 300;
    letter-spacing: .02em;
}

.data dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
    gap: .6rem clamp(1rem, 2vw, 2rem);
    font-size: clamp(.875rem, 1.1vw, .9375rem);
    line-height: 1.6;
}

.data dt {
    color: var(--muted-fg);
    font-size: .8125em;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding-top: .18em;
}

.data dd {
    margin: 0;
    color: var(--body-fg);
}

.data dd a {
    position: relative;
    color: var(--paper);
}

.data dd a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.22rem;
    width: 100%;
    height: 1px;
    background: var(--sage);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.data dd a:hover::after {
    transform: scaleX(1);
}

/* ---------- call to action ---------- */

.cta {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    padding: .95rem 1.6rem;
    border: 1px solid var(--line-strong);
    font-size: clamp(.6875rem, 1vw, .8125rem);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: border-color .45s var(--ease), background .45s var(--ease),
        color .45s var(--ease);
}

.cta i {
    font-style: normal;
    color: var(--sage);
    transition: transform .45s var(--ease), color .45s var(--ease);
}

.cta:hover {
    background: var(--sage);
    border-color: var(--sage);
    color: var(--paper);
}

.cta:hover i {
    color: var(--paper);
    transform: translateX(.3rem);
}

/* ---------- footer ---------- */

.foot {
    border-top: 1px solid var(--line);
    padding-block: clamp(2.5rem, 6vh, 4rem);
}

.foot__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
}

.foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem clamp(1.25rem, 3vw, 2.5rem);
}

.foot__links a,
.foot__contact a {
    position: relative;
    font-size: clamp(.8125rem, 1.2vw, .9375rem);
    letter-spacing: .04em;
    color: rgba(250, 250, 250, .78);
    transition: color .4s var(--ease);
}

.foot__links a::after,
.foot__contact a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.3rem;
    width: 100%;
    height: 1px;
    background: var(--sage);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.foot__links a:hover,
.foot__contact a:hover {
    color: var(--paper);
}

.foot__links a:hover::after,
.foot__contact a:hover::after {
    transform: scaleX(1);
}

.foot__contact {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem clamp(1.25rem, 3vw, 2.5rem);
}

.foot__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 2rem;
    margin-top: clamp(2rem, 5vh, 3rem);
    padding-top: clamp(1.25rem, 3vh, 2rem);
    border-top: 1px solid var(--line);
}

/* ---------- pojawianie się elementów ---------- */

/* Jeden ruch dla całej strony — podniesienie o 1rem z wygaszeniem, w rytmie
   ustawionym przez --i (kolejność w bloku) i --d (opóźnienie sekcji). Ten sam
   czas i ta sama krzywa, co wejście strony głównej meza.studio. */
html.js .reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
    transition-delay: calc(var(--d, 0s) + var(--i, 0) * .1s);
}

html.js .reveal.is-in {
    opacity: 1;
    transform: none;
}

/* kreska nie podnosi się z dołu — rysuje się od lewej, jak linia na rysunku */
html.js .hr.reveal {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.5s var(--ease);
    transition-delay: calc(var(--d, 0s) + var(--i, 0) * .1s);
}

html.js .hr.reveal.is-in {
    transform: scaleX(1);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- responsive & motion ---------- */

@media (max-width: 40rem) {
    .rules {
        grid-template-columns: 68% 1fr;
    }

    .rules i:nth-child(n+3) {
        display: none;
    }

    .lockup__text {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    html.js .reveal,
    html.js .hr.reveal {
        opacity: 1;
        transform: none;
    }

    /* stany startowe animacji, których nikt już nie odegra */
    .rules i {
        transform: none;
    }
}

/* ---------- partner mark ---------- */

/* The mark signs the plate rather than heading the column. It ships in a teal
   that fights the palette, and flattening it to paper made it the loudest
   thing on the page — so it is drawn through its own alpha as a mask, which
   lets it take a palette colour instead. */
.partner-logo {
    position: absolute;
    z-index: 2;
    left: clamp(.875rem, 4%, 1.5rem);
    bottom: clamp(.875rem, 4%, 1.5rem);
    width: clamp(7rem, 46%, 9.5rem);
    aspect-ratio: 300 / 84;
    background: var(--sage-pale);
    -webkit-mask: url("../images/golawicki-logo.webp") no-repeat left center / contain;
    mask: url("../images/golawicki-logo.webp") no-repeat left center / contain;
}