:root { --ink: #000; --line: #e6e6e6; --fill: #f3f3f3; --max: 980px; }
    * { box-sizing: border-box; }
    html { scroll-behavior: auto; }
    body {
      margin: 0;
      background: #fff;
      color: #000;
      font-family: Outfit, sans-serif;
      font-weight: 360;
      font-size: 17px;
      line-height: 1.4;
      overflow-anchor: none;
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; }
    .wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
    header {
      position: sticky;
      top: 0;
      z-index: 5;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }
    .bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 18px 0;
    }
    .mark { font-size: 18px; font-weight: 520; letter-spacing: 0.04em; }
    .bar-end { display: flex; align-items: center; gap: 28px; }
    nav { display: flex; gap: 22px; }
    nav a, .social a, .lang-switch { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
    html[lang="pl"] .en { display: none; }
    html[lang="en"] .pl { display: none; }
    .lang-switch {
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
    }
    .social { display: flex; align-items: center; gap: 14px; }
    .social a { display: flex; }
    .social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    nav a.is-on { text-decoration: underline; text-underline-offset: 4px; }
    .burger, .menu-close { display: none; }

    main { padding: 56px 0 80px; }
    .view { display: none; }
    .view.is-on { display: block; }
    h1, h2 {
      font-weight: 460;
      letter-spacing: 0;
      text-align: center;
      margin: 0 0 48px;
    }
    h1 { font-size: clamp(32px, 5vw, 48px); }
    #portfolio h1.hello {
      max-width: 28em;
      margin: 4px auto 84px;
      text-align: center;
      font-size: clamp(28px, 3vw, 38px);
      font-weight: 460;
      line-height: 1.2;
      letter-spacing: 0.01em;
    }
    #portfolio h1.hello .role {
      display: block;
      margin-top: 10px;
      font-size: 20px;
      font-weight: 300;
      line-height: 1.4;
      letter-spacing: 0.01em;
    }
    #portfolio h1.hello .role + .role { margin-top: 6px; }
    html[lang="pl"] #portfolio h1.hello .en,
    html[lang="en"] #portfolio h1.hello .pl { display: none; }
    #portfolio .port-title { display: none; }
    #portfolio.as-section .hello { display: none; }
    #portfolio.as-section .port-title { display: block; }
    h2 { font-size: clamp(26px, 4vw, 36px); }
    .lead, .copy {
      max-width: 42rem;
      margin: 0 auto 28px;
      text-align: center;
      font-size: 18px;
      line-height: 1.4;
      font-weight: 300;
    }
    .intro {
      letter-spacing: 0;
      text-transform: none;
      margin: 0 auto 48px;
    }
    .intro a { text-decoration: underline; text-underline-offset: 3px; }
    #mebligo .lead:not(.intro),
    #tanieto .lead:not(.intro),
    #komercyjna .lead:not(.intro),
    #autorska .lead:not(.intro) {
      font-size: 22px;
      letter-spacing: 0.06em;
      text-transform: none;
      font-weight: 500;
      margin: 72px auto 0;
    }
    .page-head + .lead,
    #mebligo .intro + .lead,
    #tanieto .intro + .lead {
      margin-top: 0;
    }
    .section-label,
    .section-label.loose { margin-top: 72px; }
    .note {
      max-width: 40rem;
      margin: 12px auto 0;
      text-align: center;
      font-size: 18px;
      line-height: 1.4;
      font-weight: 300;
    }
    .fine {
      max-width: 36rem;
      margin: 16px auto 0;
      text-align: center;
      font-size: 12px;
      line-height: 1.4;
      font-weight: 300;
    }
    .copy p { margin: 0 0 14px; }
    .offers p { font-size: 18px; line-height: 1.4; font-weight: 300; }
    .bio {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 28px;
      max-width: 42rem;
      margin: 28px auto 0;
    }
    .bio img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      border-radius: 50%;
      display: block;
    }
    .bio .copy { margin: 0; max-width: none; text-align: center; font-weight: 300; }

    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      max-width: 980px;
      margin: 28px auto 0;
    }
    .tile {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      text-align: center;
      align-items: center;
    }
    figure.tile { cursor: default; }
    #portfolio .tile .clip {
      order: 0;
      display: block;
      width: 100%;
      aspect-ratio: 1;
      margin: 0;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    }
    #portfolio .tile .clip video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      background: #fff;
    }
    .tile img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      display: block;
      background: var(--fill);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    }
    .view:not(#portfolio) .tile img,
    #mebligo .tile img {
      width: auto;
      max-width: 100%;
      height: auto;
      aspect-ratio: auto;
      object-fit: contain;
    }
    #ilustracja .tile {
      min-width: 0;
      align-items: stretch;
    }
    #ilustracja .tile img {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      aspect-ratio: 1 / 1 !important;
      object-fit: cover !important;
    }
    .tile span {
      display: block;
      order: -1;
      margin: 0 0 8px;
      color: #000;
      background: none;
      font-size: 16px;
    }
    #portfolio .tile span,
    #projektowanie .tile span,
    #ilustracja .tile span {
      font-size: 14px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 520;
      margin-bottom: 18px;
    }
    #portfolio .tile span {
      min-height: 2.8em;
      line-height: 1.35;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
    html[lang="pl"] #portfolio .tile .en,
    html[lang="en"] #portfolio .tile .pl { display: none; }
    figure.tile span { display: none; }

    dialog {
      border: 0;
      padding: 0;
      background: transparent;
      width: min(1040px, 94vw);
      height: min(860px, 90vh);
      max-width: none;
      max-height: none;
      overflow: visible;
    }
    dialog::backdrop { background: rgba(0, 0, 0, 0.82); }
    .viewer {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .frame {
      position: absolute;
      inset: 16px 76px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .shot {
      position: relative;
      max-width: 100%;
      margin-top: 52px;
    }
    dialog img {
      display: block;
      max-width: 100%;
      max-height: calc(90vh - 190px);
      width: auto;
      height: auto;
      object-fit: contain;
      background: #fff;
    }
    .lb-title { display: none; }
    .nav-arrow {
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: #fff;
      color: #000;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    #prev,
    #next {
      position: absolute;
      top: 50%;
      z-index: 2;
      transform: translateY(-50%);
    }
    #prev { left: 10px; }
    #next { right: 10px; }
    #prev span,
    #next span,
    .close-view span { transform: translateY(-1px); }
    .close-view {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 3;
      transform: translateY(calc(-100% - 8px));
    }
    @media (max-width: 700px) {
      dialog {
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;
        margin: 0;
      }
      .frame { inset: 12px 46px 12px; }
      .shot { margin-top: 44px; }
      dialog img { max-height: calc(100dvh - 170px); }
      .nav-arrow { width: 36px; height: 36px; font-size: 22px; }
      #prev { left: 6px; }
      #next { right: 6px; }
    }

    .page-head {
      position: relative;
      margin: 0 0 48px;
    }
    #mebligo .page-head,
    #tanieto .page-head { margin-bottom: 22px; }
    .page-head h2 { margin: 0; padding: 0 36px; }
    .page-head .back {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      margin: 0;
    }
    .back {
      display: block;
      margin: 0 0 4px;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
      letter-spacing: 0;
      text-transform: none;
    }
    .back-end { margin: 48px 0 8px; }
    .end-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 760px;
      margin: 48px auto 8px;
    }
    .end-nav .back { margin: 0; }
    .next {
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      font-size: 16px;
      letter-spacing: 0.02em;
    }
    @media (min-width: 700px) {
      .grid { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 980px) {
      .grid { grid-template-columns: 1fr 1fr 1fr; }
    }
    #portfolio .grid,
    #projektowanie .grid,
    #ilustracja .grid { row-gap: 64px; }
    @media (min-width: 700px) {
      #projektowanie .grid,
      #ilustracja .grid { grid-template-columns: 1fr 1fr; }
      #portfolio .grid { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 980px) {
      header .wrap,
      #portfolio .wrap { width: min(1100px, calc(100% - 40px)); }
      #portfolio .grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        max-width: none;
      }
    }
    #mebligo .grid,
    #tanieto .grid,
    #komercyjna .grid,
    #autorska .grid {
      grid-template-columns: 1fr;
      max-width: 760px;
      gap: 28px;
    }
    #mebligo .grid .tile img,
    #tanieto .grid .tile img,
    #komercyjna .grid .tile img,
    #autorska .grid .tile img {
      width: 100%;
      height: auto;
      max-width: 100%;
    }
    @media (min-width: 700px) {
      #mebligo .grid,
      #tanieto .grid,
      #komercyjna .grid,
      #autorska .grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
    }
    #mebligo .grid.stack .tile {
      width: 100%;
      grid-column: auto;
    }
    #mebligo .grid.stack,
    #tanieto .grid.stack,
    #komercyjna .grid,
    #autorska .grid {
      grid-template-columns: 1fr;
    }
    #animacje .anims {
      grid-template-columns: 1fr;
      max-width: 760px;
      justify-items: center;
      gap: 28px;
    }
    @media (min-width: 700px) {
      #animacje .anims { grid-template-columns: 1fr 1fr; }
    }
    #animacje .anims video {
      width: 100%;
      max-width: none;
      height: auto;
      aspect-ratio: 608 / 1080;
      object-fit: contain;
      background: #fff;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    }
    #animacje .anim-last {
      display: flex;
      justify-content: center;
      margin: 36px auto 0;
      max-width: none;
      width: 100%;
    }
    #animacje .anim-last video {
      width: min(720px, 100%);
      max-width: none;
      height: auto;
      aspect-ratio: auto;
      object-fit: contain;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    }
    #malarstwo .grid {
      grid-template-columns: 1fr;
      max-width: 760px;
      gap: 40px;
    }
    #malarstwo .tile img {
      width: 100%;
      height: auto;
      aspect-ratio: auto;
      object-fit: contain;
    }
    #malarstwo figure.tile span {
      display: block;
      order: -1;
      margin: 0 0 16px;
      font-size: 22px;
      letter-spacing: 0.06em;
      text-transform: none;
      font-weight: 500;
    }
    html[lang="pl"] #malarstwo figure.tile .en,
    html[lang="en"] #malarstwo figure.tile .pl { display: none; }

    .offers { display: grid; gap: 18px; max-width: 640px; margin: 0 auto; text-align: center; }
    .offers article { border-top: 1px solid #000; padding-top: 14px; }
    .offers h3 { margin: 0 0 6px; font-weight: 520; font-size: 20px; }
    .offers p { margin: 0; }

    form { max-width: 460px; margin: 28px auto 0; text-align: left; }
    label { display: block; font-size: 13px; margin: 16px 0 6px; }
    input, textarea {
      width: 100%;
      border: 0;
      border-bottom: 1px solid #000;
      background: transparent;
      font: inherit;
      color: #000;
      padding: 8px 0;
    }
    textarea { min-height: 110px; resize: vertical; }
    .send {
      margin-top: 18px;
      border: 1px solid #000;
      background: #000;
      color: #fff;
      padding: 11px 18px;
      cursor: pointer;
    }
    footer { padding: 10px 0 36px; text-align: center; font-size: 13px; }

    @media (min-width: 800px) {
      .grid { grid-template-columns: 1fr 1fr 1fr; }
    }
    @media (max-width: 700px) {
      header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: #fff;
      }
      body { padding-top: 62px; }
      .bar { position: relative; }
      .mark { font-size: 15px; }
      .bio { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
      .bio img { width: 160px; height: 160px; }
      .bio .copy { text-align: center; }
      .bar-end { gap: 14px; }
      .social { position: relative; z-index: 45; gap: 12px; }
      .social svg { width: 20px; height: 20px; }
      .burger {
        display: block;
        position: relative;
        z-index: 40;
        width: 24px;
        height: 16px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        cursor: pointer;
      }
      .burger span {
        position: absolute;
        left: 0;
        width: 24px;
        height: 1.5px;
        background: #000;
        transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
      }
      .burger span:nth-child(1) { top: 0; }
      .burger span:nth-child(2) { top: 7px; }
      .burger span:nth-child(3) { top: 14px; }
      body.menu-open .burger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
      body.menu-open .burger span:nth-child(2) { opacity: 0; }
      body.menu-open .burger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
      body.menu-open header { z-index: 40; background: transparent; border-bottom-color: transparent; }
      body.menu-open .mark { visibility: hidden; }
      body.menu-open { overflow: hidden; }
      nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        position: fixed;
        inset: 0;
        margin: 0;
        padding: 0;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 30;
      }
      body.menu-open nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      nav a, nav .lang-switch, body.menu-open nav a, body.menu-open nav .lang-switch {
        display: block;
        min-height: 0;
        border: 0;
        border-radius: 0;
        background: none;
        font-size: 22px;
        line-height: 1.25;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-align: center;
      }
      body { line-height: 1.4; }
      .lead, .copy, .note, .offers p, .bio .copy, .fine,
      #portfolio h1.hello .role { line-height: 1.4; }
      h1, h2 { letter-spacing: 0; }
      #mebligo .lead:not(.intro),
      #tanieto .lead:not(.intro),
      #komercyjna .lead:not(.intro),
      #autorska .lead:not(.intro),
      #malarstwo figure.tile span { letter-spacing: 0.06em; }
      #portfolio .tile span,
      #projektowanie .tile span,
      #ilustracja .tile span { letter-spacing: 0.14em; }
    }