/* ========================================================================
   STYLE TRESCI STRON — jedyne zrodlo prawdy dla wygladu tresci.
   Wyjete z <head> pliku index.html 2026-09-04. Powod: nowe strony budowane
   w edytorze musza dostac ten sam wyglad, a siedzac w jednym pliku nie mogly.
   Ta sama operacja, ktora wczesniej udala sie z rama.css.

   KOLEJNOSC W <head> MA ZNACZENIE I JEST TAKA:
     1. fonty Google
     2. TEN ARKUSZ
     3. js/scale.js  — wstrzykuje w locie <style id="ramaSkala"> z paddingiem
                       .site-header i .status; ma bic reguly stad, dlatego stoi PO
     4. css/rama.css — rama i stopka, MUSI BYC OSTATNIM ARKUSZEM
   Nie dopisywac <style> w stronach ponizej rama.css i nie przesuwac tego linku
   za scale.js — jedno i drugie po cichu zmieni wyglad belki.

   Sklejone z czterech blokow <style>, w tej samej kolejnosci, co w pliku.
   Zadna regula nie byla zmieniana.
   ======================================================================== */

  :root{
    /* JEDNOSTKA SZEROKOSCI OKNA Z GORNYM LIMITEM (2026-08-08, decyzja Jarka: strona w HD ma
       wygladac tak samo jak w UHD; dopiero PONIZEJ HD zmieniaja sie proporcje). Rozmiary liczone
       w `vw` rosly bez konca, wiec na 4K typografia i odstepy byly o polowe wieksze niz na HD.
       Ta jednostka zatrzymuje sie na 1920 px. Swiadome `100vw` (bleed) zostaje bez zmian. */
    --vwu:min(1vw,19.2px);

    --cream:#F5F1E5;
    --cream-2:#EBE5D6;
    --ink:#1C1C1A;
    --mid:#6a6a5f;
    --accent:#4c4c44;
    --line:rgba(24,24,22,.5);
    --line-soft:rgba(24,24,22,.16);
    --maxw:2200px;                   /* content cap, centered */
    --frame:30px;                    /* frame na obrzeżach strony (full-bleed) */
    --ci:clamp(46px,calc(var(--vwu) * 6),130px);      /* minimalny margines treści */
    --content:1920px;                /* szerokość treści (HD), wyśrodkowana na UHD */
    --hpad:max(var(--ci),calc((100% - var(--content)) / 2));
    /* HERO: minimalny odstep tekstu od krawedzi wideo. Rosnie ta sama jednostka co typografia
       (--vwu, sufit 1920px), wiec na HD/4K nic sie nie zmienia, a na laptopie tekst przestaje
       dotykac wideo. Podloga 76px, sufit 140px. */
    --hero-gap:clamp(76px,calc(var(--vwu) * 7),140px);
    --serif:"Cormorant Garamond",Georgia,serif;
    --sans:"Jost",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55}


  /* FRAME – na obrzeżach całej strony */
  .shell{position:fixed;inset:var(--frame);border:1px solid var(--line);background:var(--cream);overflow:hidden;z-index:10}
  .scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:130px;padding-bottom:58px}

  /* HEADER – box, logo permanentny; treść chowa się za nim */
  .site-header{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,calc(var(--vwu) * 3),42px)}
  .s-logo img{height:60px;width:auto;display:block;opacity:.95}

  .side{position:absolute;top:50%;z-index:15;font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--mid);writing-mode:vertical-rl}
  .side.l{left:8px;transform:translateY(-50%) rotate(180deg)}
  .side.r{right:8px;transform:translateY(-50%)}

  .status{position:absolute;left:0;right:0;bottom:0;z-index:25;background:var(--cream);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:15px clamp(20px,calc(var(--vwu) * 3),42px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .lang{cursor:pointer;user-select:none}
  .lang b{color:var(--ink)}.lang span{opacity:.5;transition:opacity .3s}
  .shell.en .lang b{color:var(--accent);font-weight:400;opacity:.5}
  .shell.en .lang span{opacity:1;color:var(--ink)}
  .status .wave{opacity:.5}
  .status .lang b{color:var(--ink)}.status .lang span{opacity:.5}

  /* content centered */
  main{position:relative;z-index:10;padding:0}

  /* ===== ZASADY LINII =====================================================
     SEKCJA (główna)   -> linia na CAŁĄ szerokość boxa = border-top na sekcji
       kolejność: Hero · Klienci · Filar 1 · Filar 2 · Realizacje · Works · Brief · Stopka
     PODSEKCJA (mniejsza) -> linia na szerokość CONTENTU = inset var(--hpad)
       .pillar-head::after  (linia pod opisem filaru)
       .cat + .cat::before  (linie między kategoriami)
     ====================================================================== */
  .eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}

  /* HERO – mniej whitespace */
  .hero{display:flex;align-items:stretch;gap:0;padding:0;min-height:60vh}
  /* HERO tekst: wolne miejsce w lewej polowie dzielone 2:1 (2/3 od lewej krawedzi,
     1/3 od wideo). Minimalne marginesy: --ci z lewej, --hero-gap od wideo — na waskich
     ekranach one wygrywaja i blok tekstu sie zweza zamiast dotykac wideo. */
  .hero .col-text{flex:0 0 50%;max-width:50%;min-width:0;align-self:center;display:grid;grid-template-columns:minmax(var(--ci),2fr) minmax(0,max-content) minmax(var(--hero-gap),1fr);align-content:center;padding:clamp(38px,calc(var(--vwu) * 2.81),54px) 0}
  .hero .col-text > *{grid-column:2;min-width:0}
  .hero-media{flex:0 0 50%;max-width:50%;min-width:0;border-left:1px solid var(--line);overflow:hidden;align-self:stretch;background:var(--cream-2)}
  .hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;filter:saturate(.97);display:block}
  @media(max-width:940px){
    .hero{flex-direction:column;align-items:stretch;min-height:auto}
    .hero .col-text{flex:1 1 auto;max-width:100%;padding:44px var(--hpad) 36px}
    .hero-media{flex:0 0 auto;max-width:100%;width:100%;height:auto;aspect-ratio:2/1;border-left:0;border-top:1px solid var(--line)}
  }
  .hero-tag{font-family:var(--serif);font-style:italic;font-size:clamp(17px,calc(var(--vwu) * 1.9),23px);color:var(--accent);margin-bottom:18px}
  .hero h1{font-family:var(--serif);font-weight:300;line-height:.9;letter-spacing:-.012em;font-size:clamp(52px,calc(var(--vwu) * 4.6),150px)}
  .hero h1 sup{font-size:.28em;vertical-align:super;color:var(--accent)}
  .hero-sub{max-width:448px;text-wrap:pretty;margin-top:30px;font-size:clamp(13px,calc(11px + calc(var(--vwu) * 0.16)),18px);line-height:1.75;color:var(--accent)}
  .hero-cta{display:inline-flex;align-items:center;gap:12px;margin-top:34px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:6px;width:fit-content;transition:.3s}
  .hero-cta:hover{gap:20px}

  /* ODSTĘPY SEKCJI — JEDNA SKALA (2026-08-16).
     Pionowe paddingi sekcji były sztywne w px, więc gdy `js/scale.js` zwęża pole treści na
     węższym ekranie, strona robiła się „pusto i ciasno naraz": kolumna mniejsza, odstępy te same.
     Teraz idą TĄ SAMĄ jednostką co typografia — `--vwu` — więc mają tę samą podłogę i tę samą
     proporcję. Mnożnik = dawna wartość / 19.2, górna granica clamp = dawna wartość, czyli przy
     polu treści 1920 px (4K na pełnym ekranie) wszystko wypada CO DO PIKSELA jak przedtem.
     Dolna granica (≈70%) to tylko bezpiecznik dla stron bez `scale.js`. Poziome paddingi
     zostają na `var(--hpad)` — te już skalują się z polem treści.
     Odstępy liczone od WYSOKOŚCI okna (`vh`, np. .works-grid) zostają bez zmian. */
  /* POSITIONING */
  .position{padding:clamp(84px,calc(var(--vwu) * 6.25),120px) var(--hpad);border-top:1px solid var(--line)}
  .position p{font-family:var(--serif);font-weight:300;font-size:clamp(26px,calc(var(--vwu) * 2.65),56px);line-height:1.14;max-width:18ch}
  .position p strong{font-weight:400;font-style:italic}
  .position .lead{margin-top:38px;max-width:560px;font-size:15px;line-height:1.7;color:var(--accent)}

  /* CLIENTS – jeżdżący pasek (marquee) prawo -> lewo */
  .clients{position:relative;isolation:isolate;display:flex;align-items:center;gap:40px;padding:clamp(21px,calc(var(--vwu) * 1.56),30px) var(--hpad);border-top:1px solid var(--line)}
  .clients .label{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);flex-shrink:0}
  .clients .marquee{flex:1;overflow:hidden;position:relative}
  .clients .marquee::before,.clients .marquee::after{content:"";position:absolute;top:0;bottom:0;width:8%;z-index:1;pointer-events:none}
  .clients .marquee::before{left:0;background:linear-gradient(90deg,var(--cream),rgba(245,241,229,0))}
  .clients .marquee::after{right:0;background:linear-gradient(270deg,var(--cream),rgba(245,241,229,0))}
  .clients .track{display:inline-flex;align-items:center;white-space:nowrap;animation:marquee 40s linear infinite}
  .clients:hover .track{animation-play-state:paused}
  .clients .logo{font-family:var(--serif);font-size:clamp(16px,calc(var(--vwu) * 1.05),25px);letter-spacing:.04em;color:var(--ink);opacity:.72;padding:0 30px}
  .clients .sep{color:var(--mid);opacity:.45;font-family:var(--serif);font-size:clamp(14px,calc(var(--vwu) * 0.92),22px)}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* PILLAR heading (bez pastylek) */
  .filar{border-top:1px solid var(--line)}
  .pillar-head{position:relative;padding:clamp(62px,calc(var(--vwu) * 4.58),88px) var(--hpad) clamp(45px,calc(var(--vwu) * 3.33),64px)}
  .cats{padding-top:clamp(41px,calc(var(--vwu) * 3.02),58px)}
  .pillar-head::after{content:none}
  .pillar-head .kicker{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:20px}
  .pillar-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,calc(var(--vwu) * 3.75),84px);line-height:.98;color:var(--ink)}
  .pillar-head .desc{max-width:500px;margin-top:18px;font-size:15px;line-height:1.7;color:var(--accent)}

  /* ===== CATEGORY – rama à la Trunk (yoyogipark) ==========================
     Scena (flex): zdjęcie + panel OBOK. Zamknięte: cover 100% szer., crop 2.2:1-ish.
     Otwarte: cover morfuje (width+height RAZEM, .8s ease) do PEŁNYCH proporcji kadru,
     cap wysokości tak, żeby zdjęcie+opis+miniatury mieściły się na JEDNYM ekranie;
     panel (opis/zakres/miniatury/galeria) wypełnia resztę szerokości, fade-in.
     Podmiana kadru z miniaturki = cross-dissolve (dwie warstwy .cimg) + morph. */
  .cat{position:relative;--inline:clamp(44px,calc(var(--vwu) * 4.2),80px);--catpad:calc(var(--inline) + clamp(48px,calc(var(--vwu) * 5.6),108px));margin:0 0 clamp(64px,7vh,110px)}
  .cats{padding-top:clamp(36px,calc(var(--vwu) * 2.71),52px)}
  .cat .cat-frame{position:relative;margin:0 var(--hpad);border:1px solid var(--line);border-right:0}
  .cat .cat-frame::before{content:"";position:absolute;top:0;bottom:0;left:var(--inline);width:1px;background:var(--line)}
  .cat .no{position:absolute;top:22px;left:clamp(12px,calc(var(--vwu) * 1.4),28px);font-family:var(--serif);font-size:13px;letter-spacing:.05em;color:var(--accent)}
  .cat .cat-body{position:relative;padding:clamp(44px,calc(var(--vwu) * 4.8),90px) clamp(40px,calc(var(--vwu) * 5.5),106px) clamp(46px,calc(var(--vwu) * 5),94px) var(--catpad)}
  .cat h3{display:inline-block;position:relative;font-family:var(--serif);font-weight:300;font-size:clamp(30px,calc(var(--vwu) * 2.8),56px);line-height:1;letter-spacing:.01em;padding-bottom:clamp(14px,calc(var(--vwu) * 1.4),24px);cursor:pointer;transition:color .3s}
  .cat h3:hover{color:var(--accent)}
  .cat h3::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line)}
  .cat .cat-stage{display:flex;align-items:stretch;margin-top:clamp(28px,calc(var(--vwu) * 3.2),56px)}
  .cat .cover{position:relative;flex:0 0 auto;width:100%;aspect-ratio:16/9;height:auto;overflow:hidden;background:var(--cream-2);transition:width .8s ease,height .8s ease;cursor:pointer}
  .cat:not(.open) .cover{max-height:56vh}
  @media(max-height:1000px){.cat:not(.open) .cover{max-height:46vh}}
  .cat .cover .cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;will-change:transform}
  .cat .cover .cimg.on{opacity:1}
  /* karta 03 – realne wideo na coverze; poster/.cimg pod spodem jako klatka zastępcza (preload='none') */
  .cat .cover .cvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;pointer-events:none}
  .cat .cover .cvid.on{opacity:1}
  /* panel obok zdjęcia */
  .cat-acd{flex:1 1 0;min-width:0;height:0;opacity:0;overflow:hidden;border-left:1px solid var(--line);margin-left:clamp(22px,calc(var(--vwu) * 2.8),52px);transition:height .8s ease,opacity .7s ease}
  .cat.open .cat-acd{opacity:1}
  .acd-inner{height:100%;min-width:280px;overflow-y:auto;padding:clamp(2px,calc(var(--vwu) * .4),8px) clamp(22px,calc(var(--vwu) * 2.8),52px) 8px;display:flex;flex-direction:column;gap:clamp(16px,2.2vh,26px)}
  .acd-inner>p{font-size:15px;line-height:1.75;color:var(--accent);margin:0;max-width:520px}
  .acd-inner .scope .h{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mid);margin-bottom:10px}
  .acd-inner .scope ul{list-style:none;font-size:13.5px;line-height:1.9;color:var(--ink)}
  .acd-inner .scope li::before{content:"– ";color:var(--mid)}
  .acd-thumbs{display:flex;flex-wrap:wrap;gap:10px}
  .acd-thumbs img{width:clamp(64px,calc(var(--vwu) * 5),92px);height:clamp(64px,calc(var(--vwu) * 5),92px);object-fit:cover;cursor:pointer;opacity:.6;border:1px solid transparent;transition:opacity .3s,border-color .3s;display:block;background:var(--cream-2)}
  .acd-thumbs img:hover{opacity:1}
  .acd-thumbs img.active{opacity:1;border-color:var(--ink)}
  .acd-thumbs .ph{width:clamp(64px,calc(var(--vwu) * 5),92px);height:clamp(64px,calc(var(--vwu) * 5),92px);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);text-align:center}
  .gal-link{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:5px;width:fit-content;transition:.3s;margin-top:auto}
  .gal-link:hover{gap:18px}
  /* przycisk Więcej/Zamknij – blob jak Detail/Close na yoyogi */
  .expand{position:absolute;right:clamp(24px,calc(var(--vwu) * 4.6),90px);bottom:-55px;width:110px;height:110px;background:none;border:0;padding:0;cursor:pointer;z-index:5;font-family:var(--serif);font-size:16px;letter-spacing:.01em;color:var(--ink);display:flex;align-items:center;justify-content:center}
  .expand svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .expand svg path{fill:var(--cream);stroke:var(--line);vector-effect:non-scaling-stroke;transition:fill .35s;transform-origin:50% 50%}
  .expand span{position:relative;z-index:1;transition:color .35s}
  .expand:hover svg path{fill:var(--ink)}
  .expand:hover span{color:var(--cream)}
  .expand:hover svg{transform:rotate(10deg)}
  @media(max-width:940px){
    .cat .cat-stage{display:block}
    .cat-acd{margin-left:0;border-left:0;border-top:1px solid var(--line)}
    .cat.open .cat-acd{margin-top:18px}
    .acd-inner{min-width:0;height:auto;overflow:visible;padding:20px 0 0}
  }

  /* ===== MENU – drawer z prawej à la yoyogi ================================ */
  /* style menu: js/menu.js */

  /* FEATURED – villa */
  .feature{margin-top:66px;position:relative;overflow:hidden;height:clamp(340px,56vh,600px);border:1px solid var(--line)}
  .feature img{width:100%;height:100%;object-fit:cover}
  .feature .placeholder{position:absolute;top:16px;right:16px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);border:1px solid rgba(255,255,255,.55);padding:5px 9px;border-radius:20px}
  .feature .meta{position:absolute;left:30px;bottom:28px;color:var(--cream);text-shadow:0 2px 16px rgba(0,0,0,.45)}
  .feature .meta .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.85}
  .feature .meta h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,calc(var(--vwu) * 2.45),52px);line-height:1;margin-top:8px}
  .feature .meta p{font-size:12px;letter-spacing:.05em;margin-top:10px;max-width:360px;opacity:.9}

  /* CASES */
  .cases{padding:clamp(83px,calc(var(--vwu) * 6.15),118px) var(--hpad);border-top:1px solid var(--line)}
  .cases h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,calc(var(--vwu) * 3.4),72px);margin-bottom:44px}
  /* realizacje jako kafelki – 3 w rzędzie, tak jak „Sesje" na końcu galerii */
  .case-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,calc(var(--vwu) * 2.2),44px) clamp(14px,calc(var(--vwu) * 1.5),26px)}
  .case-tile{display:block;text-decoration:none;color:var(--ink)}
  .case-tile .t-img{display:block;position:relative;overflow:hidden;border-radius:9px;background:var(--cream-2);aspect-ratio:3/2}
  .case-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
  .case-tile:hover img{transform:scale(1.05)}
  .case-tile .t-cap{display:flex;align-items:baseline;gap:12px;margin-top:14px}
  .case-tile .idx{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--accent);flex-shrink:0}
  .case-tile .title{font-family:var(--serif);font-weight:400;font-size:clamp(19px,calc(var(--vwu) * 1.3),28px);line-height:1.15;transition:color .3s}
  .case-tile:hover .title{color:var(--accent)}
  .case-tile .sub{display:block;margin-top:7px;font-size:12px;letter-spacing:.06em;color:var(--accent)}
  @media(max-width:900px){.case-tiles{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.case-tiles{grid-template-columns:1fr}}

  /* WORKS */
  /* WORKS – pełnoszerokościowa ściana małych kafelków, ~1/2 wysokości okna, „Works" w środku */
  .works{border-top:1px solid var(--line)}
  .works-grid{display:grid;grid-template-columns:repeat(10,1fr);grid-auto-flow:dense;gap:6px;padding:clamp(26px,4.5vh,58px) 8px}
  .works-grid .wc{position:relative;overflow:hidden;border-radius:3px;display:block;background:var(--cream-2);aspect-ratio:1/1}
  .works-grid .wc img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
  .works-grid a.wc:hover img{transform:scale(1.06)}
  .works-grid .wc-txt{grid-column:4 / 6;grid-row:2 / 4;aspect-ratio:auto;background:var(--cream);border:1px solid var(--line-soft);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:clamp(20px,calc(var(--vwu) * 1.9),42px);overflow:hidden}
  .works-grid .wc-txt h2{font-family:var(--serif);font-weight:300;font-size:clamp(44px,calc(var(--vwu) * 4.4),92px);line-height:.88;letter-spacing:-.015em}
  .works-grid .wc-txt p{max-width:44ch}
  .works-grid .wc-txt h2 span{display:block;font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--mid);margin-top:10px;text-align:right}
  .works-grid .wc-txt p{font-size:15px;line-height:1.7;color:var(--accent)}
  .works-grid .wc-txt .cta{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:5px;width:fit-content;transition:.3s}
  .works-grid .wc-txt .cta:hover{gap:18px}
  @media(max-width:1920px){.works-grid{grid-template-columns:repeat(8,1fr)}.works-grid .wc-txt{grid-column:3 / 6;grid-row:2 / 4}.works-grid a.wc:nth-of-type(n+19){display:none}}
  @media(max-width:1280px){.works-grid{grid-template-columns:repeat(6,1fr)}.works-grid .wc-txt{grid-column:2 / 5;grid-row:2 / 4}.works-grid a.wc:nth-of-type(n+13){display:none}}
  /* TELEFON — 2026-08-27, poprawka po zgłoszeniu Jarka („works wygląda słabo, to jedyny
     element ze zdjęciami, który odbiega"). Wcześniej była tu „kanapka": 8 kafli, panel
     opisu WEWNĄTRZ siatki jako trzynasty kafel w ramce, 8 kafli. Panel we własnej ramce
     czytał się jak kolejny kafel, a szesnaście zdjęć na stock z 578 kadrami to za mało.
     Teraz: opis NAD siatką i bez ramki (`order:-1` przenosi go na początek — to nadal
     element siatki, więc nie trzeba ruszać HTML-a), pod nim 24 kadry w czterech kolumnach. */
  @media(max-width:700px){
    .works-grid{grid-template-columns:repeat(4,1fr);gap:4px;padding:0 4px clamp(22px,4vh,40px)}
    .works-grid a.wc:nth-of-type(n+9):nth-of-type(-n+12){display:block}   /* 9–12 wracają */
    .works-grid a.wc:nth-of-type(n+25){display:none}                      /* widocznych 24 */
    .works-grid .wc-txt{order:-1;grid-column:1 / -1;grid-row:auto;
      border:0;background:none;align-items:flex-start;gap:14px;
      padding:clamp(22px,4vh,40px) 14px 22px;margin:0}
    .works-grid .wc-txt h2{font-size:clamp(46px,calc(var(--vwu) * 13),68px);width:fit-content}
    .works-grid .wc-txt h2 span{text-align:left}
    .works-grid .wc-txt p{font-size:14px;line-height:1.65;max-width:38ch}
    .works-grid .wc-txt .cta{font-size:10px}
  }

  /* BRIEF */
  /* ===== KONTAKT =====
     Jedna siatka na całą sekcję, nie doklejane kawałki: nagłówek na całą szerokość, pod nim dwie
     kolumny tej samej wysokości — po lewej sposoby kontaktu i akapit o budżecie, po prawej
     formularz. Dzięki temu obie strony sekcji są zapełnione i nic nie pływa w pustym polu. */
  .brief{padding:clamp(84px,calc(var(--vwu) * 6.25),120px) var(--hpad) clamp(91px,calc(var(--vwu) * 6.77),130px);border-top:1px solid var(--line)}
  /* Formularz po lewej, nagłówek i kontakt bezpośredni po prawej, do prawej krawędzi.
     Etykiety pól stoją POD kreską — pole jest puste u góry, podpis mówi, co w nim wpisać. */
  .brief-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,calc(var(--vwu) * 7),140px);align-items:center;max-width:1560px;margin:0 auto}
  .brief h2{font-family:var(--serif);font-weight:300;font-size:clamp(42px,calc(var(--vwu) * 4.4),88px);line-height:.92}
  .brief-side{text-align:center}
  .brief .direct{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vh,30px);margin-top:clamp(46px,7vh,96px)}
  .brief .direct a{font-family:var(--serif);font-weight:300;font-size:clamp(20px,calc(var(--vwu) * 1.65),29px);line-height:1.25;color:var(--ink);text-decoration:none;transition:color .3s}
  .brief .direct a:hover{color:var(--accent)}
  .form{display:flex;flex-direction:column}
  @media(max-width:1024px){
    .brief-cols{grid-template-columns:1fr;gap:clamp(44px,6vh,72px)}
    .brief-side{order:-1;text-align:left}
    .brief .direct{align-items:flex-start;margin-top:clamp(28px,4vh,44px)}}
  .field{display:block;cursor:text}
  .field+.field{margin-top:clamp(46px,6.5vh,86px)}
  .field input,.field textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;font-family:var(--serif);font-size:23px;line-height:1.4;color:var(--ink);outline:none;resize:none;padding:0 0 14px;display:block}
  .field input{height:52px}
  .field textarea{min-height:120px}
  .field input:focus,.field textarea:focus{border-bottom-color:var(--ink)}
  .field>span{display:block;margin-top:13px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
  .field input::placeholder,.field textarea::placeholder{color:var(--mid);opacity:.85}
  .chips{display:flex;gap:10px;flex-wrap:wrap}
  .chip{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);padding:9px 16px;border-radius:30px;cursor:pointer;transition:.3s;user-select:none}
  .chip.on,.chip:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
  .submit{margin-top:clamp(30px,4vh,46px);display:flex;justify-content:flex-end}
  .submit button{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:17px 42px;border-radius:40px;cursor:pointer;transition:.35s;font-family:var(--sans)}
  .submit button:hover{background:var(--ink);color:var(--cream)}
  .submit .note{font-size:11px;letter-spacing:.05em;color:var(--mid)}
  @media(max-width:760px){.form{grid-template-columns:1fr}.brief .top-budget{transform:none}}

  /* FOOTER */
  footer{border-top:1px solid var(--line)}
  /* stopka wyśrodkowana: same linki, bez bloku marki — brand siedzi na pionowych listwach ramki */
  /* Blok kolumn wyśrodkowany w sekcji, ale TEKST w kolumnach do lewej — wyśrodkowana lista
     linków nie ma krawędzi, po której oko schodzi w dół, i rozjeżdża się optycznie. */
  .f-top{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:48px clamp(100px,calc(var(--vwu) * 15),290px);padding:clamp(56px,calc(var(--vwu) * 4.17),80px) var(--hpad) clamp(28px,calc(var(--vwu) * 2.08),40px);text-align:left}
  .f-copy{padding:0 var(--hpad) clamp(39px,calc(var(--vwu) * 2.92),56px);text-align:right;font-size:11px;letter-spacing:.06em;color:var(--mid)}
  .f-nav,.f-contact{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
  .f-h{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
  footer a{color:var(--ink);text-decoration:none;font-size:14px;transition:.3s;width:fit-content}
  footer a:hover{color:var(--accent)}
  .f-contact span{font-size:13px;color:var(--accent)}
  .f-bottom{display:flex;justify-content:space-between;gap:20px;padding:clamp(18px,calc(var(--vwu) * 1.35),26px) 0 clamp(32px,calc(var(--vwu) * 2.4),46px);border-top:1px solid var(--line-soft);font-size:11px;letter-spacing:.06em;color:var(--mid);flex-wrap:wrap}
  @media(max-width:1000px){.f-top{gap:44px 40px}}
  @media(max-width:760px){.f-top{grid-template-columns:1fr;gap:34px}}

  .rv{}  /* animacje wejścia wyłączone – Safari gubił render pierwszej sekcji przy animacjach w kontenerze fixed+overflow */

  /* ===== TELEFON (≤640 px) – dopracowane 2026-08-07 ========================
     Powód z pomiaru na 390 px: szyna z numerem kategorii („01.") była SZERSZA niż samo zdjęcie
     (185 px szyny na 390 px ekranu), a przycisk „Więcej" – kropla 110 px – wchodził na kadr
     i wystawał poza ramkę karty. Na telefonie największą rzeczą na ekranie ma być zdjęcie.
     Druga reguła: nic klikalnego nie może być niższe niż ~44 px (palec, nie kursor). */
  @media(max-width:640px){
    .pillar-head{padding:56px var(--hpad) 30px}
    .pillar-head .desc{margin-top:14px}
    .cats{padding-top:22px}
    .cat{--inline:30px;--catpad:44px;margin-bottom:clamp(38px,6vh,60px)}
    .cat .cat-frame{margin:0 14px}
    .cat .no{top:12px;left:8px;font-size:11px}
    .cat .cat-body{padding:22px 14px 20px var(--catpad)}
    .cat h3{font-size:clamp(28px,calc(var(--vwu) * 8.4),40px);padding-bottom:12px}
    .cat .cat-stage{margin-top:16px}
    /* kadr zamknięty ma proporcje 4:3 – i w CSS (pierwsze malowanie), i w JS (closedHeight) */
    .cat .cover,.cat:not(.open) .cover{aspect-ratio:4/3;max-height:none}
    /* „Więcej" schodzi POD kadr: kropla zostaje, ale nie zasłania zdjęcia ani nie wisi poza ramką */
    /* UWAGA: `position:relative`, nie `static` – SVG kropli jest pozycjonowany absolutnie,
       więc przy `static` rozciągał się na całą ramkę karty (kropla na pół ekranu). */
    .expand{position:relative;right:auto;bottom:auto;margin:12px auto 0;width:96px;height:96px;font-size:14px}
    .acd-inner{gap:16px;padding-top:16px}
    .acd-inner>p{font-size:14.5px}
    .acd-inner .scope .h{font-size:11px}
    .acd-inner .scope ul{font-size:14px}
    .acd-thumbs img,.acd-thumbs .ph{width:76px;height:76px}
    .gal-link{padding:12px 0 8px;font-size:12px}
    /* REALIZACJE – kafelki jeden pod drugim, podpis czytelny z ręki */
    .cases{padding:74px var(--hpad)}
    .cases h2{font-size:clamp(30px,calc(var(--vwu) * 9),44px);margin-bottom:24px}
    .case-tile .title{font-size:21px;line-height:1.3}
    .case-tile .idx{font-size:15px}
    .case-tile .t-cap{margin-top:12px}
    /* KLIENCI – etykieta nad paskiem, inaczej pasek ma 120 px na przewijające się logo */
    /* KLIENCI: napis zostaje W LINII z przewijana lista, nie nad nia. W kolumnie zjadal
       cala linie ekranu i czytal sie jak zbledny naglowek (uwaga Jarka). */
    .clients{flex-direction:row;align-items:center;gap:14px;padding:16px var(--hpad)}
    .clients .label{font-size:9.5px;letter-spacing:.18em}
    .clients .marquee{flex:1;min-width:0}
    .position{padding:74px var(--hpad)}
    .feature{margin-top:38px;height:clamp(230px,40vh,340px)}
    .feature .meta{left:18px;bottom:18px}
    /* najmniejsze napisy: 10 px na telefonie jest nieczytelne */
    .acd-inner .scope .h,.works-grid .wc-txt .cta,.works-grid .wc-txt h2 span{font-size:11px}
    /* BRIEF – pola były rozstrzelone (34 px oddechu na górze i dole każdego), przez co formularz
       zajmował trzy ekrany; „Wyślij" na pełną szerokość, bo kciuk trafia w krawędź ekranu */
    .brief{padding:74px var(--hpad) 84px}
    .brief .top{margin-bottom:30px;gap:18px}
    .brief h2{font-size:clamp(40px,calc(var(--vwu) * 12),56px)}
    .field{padding:20px 0}
    .field label{margin-bottom:8px;font-size:11.5px}
    .field input,.field textarea{font-size:19px}
    .field textarea{min-height:84px}
    .submit{margin-top:26px;gap:14px}
    .submit button{width:100%;padding:16px 20px}
    /* WORKS: „Przeglądaj stock" miał 23 px wysokości */
    .works-grid .wc-txt .cta{padding:8px 0}
    .status .lang{padding:8px 6px}
    /* stopka: link ma być wysoki na palec, nie na kursor */
    .f-top{padding:56px var(--hpad) 44px}
    footer a{padding:7px 0}
    .f-nav,.f-contact{gap:6px}
  }

  /* RAMA responsywnie: iPad mniejsza; telefon bez linii bocznych (zostają poziome) */
  @media(max-width:1024px){:root{--frame:16px}}
  @media(max-width:640px){.shell{inset:12px 0;border-left:0;border-right:0}.side{display:none}}


/* ==== blok 2 z dawnego <head> index.html ==== */

/* =========================================================================
   MAIN 2 · BETA — alternatywna strona główna (wersja 2)
   Rama, zegar, menu, teksty, kolory i kroje — bez zmian. Zmienia się układ
   i sposób pokazywania galerii.

   Decyzje po uwagach Jarka (ZASADY_PROJEKTOWE.md):
   · zero pigułek, „przewiń", pasków rozdziałów i innych ozdobników z szablonu;
   · nagłówki nie stoją jeden na drugim — rozdział jest osobnym pasem, kategoria
     ma nagłówek w jednej linii z opisem i linkiem (układ redakcyjny, nie wieża tekstu);
   · kategorie rozdzielone tonem tła (--cream / --cream-3) i włosową kreską;
   · symetria + JEDEN element wypuszczony poza siatkę: numer rozdziału siedzi
     w marginesie, po lewej stronie kolumny treści.
   ========================================================================= */

:root{
  --cream-3:#EEE8D7;                                  /* trzeci ton – separacja kategorii */
  --r:clamp(6px,calc(var(--vwu) * 0.5),10px);         /* promień kadru – ledwo widoczny */
  --railgap:clamp(12px,calc(var(--vwu) * 1.25),24px);
  --hh:74px;
}

/* ===== HERO — pełny kadr, tekst na osi ================================== */
.hero2{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  height:clamp(440px,calc(100svh - var(--hh) - 104px),1020px);background:var(--cream-2)}
/* poniżej 4K baner jest niższy – inaczej zjada cały ekran, a pierwszy rozdział
   nie zdąży się pokazać (uwaga Jarka: na HD ma być mniejszy na wysokość) */
@media(max-width:2200px){.hero2{height:clamp(380px,52svh,720px)}}
.hero2 .h2-media,.hero2 .h2-media img,.hero2 .h2-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero2 .h2-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,18,16,.42) 0%,rgba(18,18,16,.16) 40%,rgba(18,18,16,.26) 66%,rgba(18,18,16,.58) 100%)}
.hero2 .h2-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--cream);padding:0 var(--hpad)}
.hero2 .hero-tag{font-family:var(--serif);font-style:italic;color:rgba(245,241,229,.9);
  font-size:clamp(15px,calc(var(--vwu) * 1.4),22px);margin-bottom:clamp(16px,2.2vh,30px)}
/* kolejność w hero 2026-08-19: h1 nad opisem — h1 przejął miejsce zaraz po tagu (bez
   własnego margin-top), a odstęp, który wcześniej miał h1 nad sobą, dostał teraz opis
   pod spodem. Rozmiar h1 (font-size) nietknięty. */
.hero2 .hero-sub{max-width:min(760px,84vw);color:rgba(245,241,229,.94);
  margin-top:clamp(28px,4vh,58px);
  font-size:clamp(15px,calc(11px + calc(var(--vwu) * 0.42)),22px);line-height:1.7;text-wrap:pretty;
  text-shadow:0 1px 16px rgba(0,0,0,.32)}
.hero2 h1{font-family:var(--serif);font-weight:300;line-height:1;
  letter-spacing:-.008em;font-size:clamp(34px,calc(var(--vwu) * 3.5),90px);text-shadow:0 2px 26px rgba(0,0,0,.22)}

/* ===== ROZDZIAŁ (filar) — otwarcie sekcji, dużo powietrza =============== */
.chap{border-top:1px solid var(--line)}
/* otwarcie rozdziału ma własny, głębszy ton – dzięki temu tytuł rozdziału
   nie zlewa się z tytułem pierwszej kategorii pod nim */
.chap-head{position:relative;background:var(--cream-2);border-bottom:1px solid var(--line-soft);
  display:grid;justify-items:center;text-align:center;gap:clamp(16px,2vh,26px);
  padding:clamp(88px,calc(var(--vwu) * 7),150px) var(--hpad)}
/* 2026-08-19: hairline nad karuzelą portretów usunięty na życzenie Jarka — tylko tu,
   pozostałe rozdziały (dla-marek, przestrzenie) mają go bez zmian. */
#portret .chap-head{border-bottom:0}
/* numer nie wchodzi w blok tekstu – siedzi w górnym marginesie, żeby tytuł
   i opis miały dokładnie tyle samo powietrza nad i pod sobą */
.chap-no{position:absolute;left:50%;transform:translateX(-50%);top:clamp(36px,calc(var(--vwu) * 2.9),62px);
  font-family:var(--serif);font-style:italic;color:var(--mid);opacity:.8;
  font-size:clamp(14px,calc(var(--vwu) * 1.1),20px)}
.chap-head h2{font-family:var(--serif);font-weight:300;line-height:.96;letter-spacing:-.01em;color:var(--ink);
  /* ta sama zasada co przy tytule kategorii: stała + jednostka, żeby na wąskim
     polu treści nagłówek nie spadał do rozmiaru zwykłego tekstu */
  font-size:clamp(46px,calc(30px + var(--vwu) * 3.9),104px)}
.chap-head .desc{max-width:min(620px,86vw);font-size:15.5px;line-height:1.8;color:var(--accent);text-wrap:pretty}

/* ===== KATEGORIA — główka na osi, pod nią pasek kadrów ================== */
/* pierwsza kategoria po otwarciu rozdziału nie potrzebuje własnej kreski */
.chap-head + .cat2{border-top:0}
.cat2{padding:clamp(56px,calc(var(--vwu) * 4.6),92px) 0 clamp(66px,calc(var(--vwu) * 5.4),112px);
  border-top:1px solid var(--line-soft)}
.cat2.tint{background:var(--cream-3)}
.cat2-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:start;
  gap:clamp(20px,calc(var(--vwu) * 3),80px);text-align:left;
  padding:0 var(--hpad) clamp(44px,calc(var(--vwu) * 3.6),80px)}
.cat2-head h3{margin-top:-.14em;font-family:var(--serif);font-weight:300;line-height:1;letter-spacing:0;
  /* tytuł kategorii ma trzymać się blisko tytułu rozdziału – stąd stała 20px w formule:
     na wąskim polu treści (wersja B) nie schodzi poniżej ~43 px */
  font-size:clamp(34px,calc(20px + var(--vwu) * 2.4),76px)}
.cat2-head h3 a{color:inherit;text-decoration:none;transition:color .3s}
.cat2-head h3 a:hover{color:var(--accent)}
.cat2-head p{max-width:52ch;font-size:14.5px;line-height:1.8;color:var(--accent);text-wrap:pretty}
.cat2-head .scope{display:flex;flex-direction:column;gap:7px;max-width:52ch;margin-top:clamp(18px,2.2vh,28px);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
/* „PELNA GALERIA" ZDJETA Z NAGLOWKA KATEGORII (2026-09-03, decyzja Jarka).
   KOSZTOWALA 46,8 px W KAZDEJ KATEGORII (22,8 px marginesu + 24 px wysokosci), a nie
   dawala zadnego wejscia, ktorego nie ma obok: do galerii prowadzi tytul kategorii
   (`.cat2-head h3 a`), KAZDE zdjecie w pasku z osobna (`a.rail-card`) i karta „wiecej"
   na koncu paska (`.rail-card.more`, napis „Pelna galeria · Zobacz →"). Czyli kilkanascie
   celow na sekcje — ten jeden byl czwartym powtorzeniem tego samego adresu.
   ZDEJMUJEMY ARKUSZEM, NIE KASUJEMY Z HTML: element zostaje w szesciu sekcjach i w edytorze,
   wiec powrot to skasowanie tej jednej reguly, a nie odtwarzanie szesciu linijek.
   NAGLOWEK ROZDZIALU (`.chap-head .lnk`) ZOSTAJE — tam link jest jedynym wejsciem.
   Zmierzone przy 1920x950: sekcja 643 -> 596 px, widocznych sekcji 1,27 -> 1,37. */
.cat2-head .lnk{display:none}
/* rozdział złożony z jednej kategorii (Portret): otwarcie i pasek kadrów to
   jedna sekcja – wspólny ton tła, bez kreski i bez powtórzonego nagłówka */
.cat2.merged{background:var(--cream-2);border-top:0;padding-top:0}
.chap-head:has(+ .cat2.merged){padding-bottom:clamp(44px,calc(var(--vwu) * 3.6),80px)}
.chap-head .lnk{margin-top:clamp(22px,2.6vh,34px)}
@media(max-width:1100px){
  .cat2-head{grid-template-columns:1fr;gap:14px}
}
.lnk{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;margin-top:clamp(20px,2.4vh,32px);width:fit-content;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:5px;transition:gap .3s,color .3s}
.lnk:hover{gap:18px;color:var(--accent)}

/* ===== PASEK KADRÓW ===================================================== */
.rail{position:relative}
.rail-track{display:flex;gap:var(--railgap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scroll-behavior:smooth;padding:2px var(--hpad);scroll-padding-left:var(--hpad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail-track::-webkit-scrollbar{display:none}
.rail-card{position:relative;flex:0 0 auto;scroll-snap-align:start;display:block;overflow:hidden;border-radius:var(--r);
  background:var(--cream-2);text-decoration:none;color:var(--ink);height:clamp(250px,50vh,600px)}
.rail-card img,.rail-card video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.rail-card:hover img,.rail-card:hover video{transform:scale(1.03)}
.rail-card.lead{aspect-ratio:16/10}
/* pasek z filmami: wszystkie kadry w proporcji filmu, żeby strip był równy */
.rail.film .rail-card,.rail.film .rail-card.lead,.rail.film .rail-card.more{aspect-ratio:16/9}
.rail-card.shot{aspect-ratio:4/3}
.rail-card.tall{aspect-ratio:3/4}
/* DWIE PROPORCJE DOLOZONE 2026-09-04 na prosbe Jarka (wybierane w edytorze, panel karuzeli).
   `ar32` to klasyczny kadr poziomy z aparatu, `ar23` ten sam pionowo — miedzy 16:10 a 4:3
   i miedzy 3:4 a niczym nie bylo dotad nic, co odpowiada realnej klatce. Nazwy celowo inne
   niz `lead/shot/tall`: tamte mowia o ROLI kadru w pasku, te wprost o proporcji. */
.rail-card.ar32{aspect-ratio:3/2}
.rail-card.ar23{aspect-ratio:2/3}
.rail-card .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;color:var(--cream);opacity:0;transition:opacity .35s;
  padding:clamp(14px,calc(var(--vwu) * 1.5),28px);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  background:linear-gradient(0deg,rgba(18,18,16,.6),rgba(18,18,16,0))}
.rail-card:hover .cap{opacity:1}
/* ostatnia karta paska – wejście do pełnej galerii */
.rail-card.more{aspect-ratio:4/3;background:transparent;border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;
  padding:clamp(18px,calc(var(--vwu) * 1.8),34px);transition:background .35s,color .35s,border-color .35s}
.rail-card.more .m-s{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.rail-card.more .m-t{font-family:var(--serif);font-weight:300;line-height:1.05;
  font-size:clamp(21px,calc(var(--vwu) * 1.85),34px)}
.rail-card.more .m-a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:4px;margin-top:6px}
.rail-card.more:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.rail-card.more:hover .m-s{color:rgba(245,241,229,.65)}
/* strzałki: kwadratowe, cienka kreska, pojawiają się pod kursorem */
.rail-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;
  border:1px solid var(--line);background:rgba(245,241,229,.9);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:15px;opacity:0;transition:opacity .3s,background .3s,color .3s}
.rail:hover .rail-nav{opacity:1}
.rail-nav:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.rail-nav[disabled]{opacity:0 !important;pointer-events:none}
.rail-nav.prev{left:0}
.rail-nav.next{right:0}
@media(hover:none){.rail-nav{display:none}}
.rail-bar{height:1px;background:var(--line-soft);margin:clamp(22px,2.4vh,36px) var(--hpad) 0;position:relative}
.rail-bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--ink);transition:width .2s,left .2s}

/* ===== REALIZACJE — siatka, bez suwaka ================================== */
.cases{border-top:1px solid var(--line);padding:clamp(90px,calc(var(--vwu) * 7),150px) var(--hpad) clamp(88px,calc(var(--vwu) * 6.6),140px)}
.cases .c-top{display:grid;justify-items:center;text-align:center;
  margin-bottom:clamp(44px,calc(var(--vwu) * 3.8),84px)}
.cases h2{font-family:var(--serif);font-weight:300;line-height:1;letter-spacing:-.006em;
  font-size:clamp(34px,calc(var(--vwu) * 3.7),80px);margin:0}
.case-tiles{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,calc(var(--vwu) * 2.6),52px) clamp(14px,calc(var(--vwu) * 1.5),26px)}
.case-tile{display:block;text-decoration:none;color:var(--ink)}
.case-tile .t-img{display:block;position:relative;overflow:hidden;border-radius:var(--r);background:var(--cream-2);aspect-ratio:3/2}
.case-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.case-tile:hover img{transform:scale(1.04)}
.case-tile .t-cap{display:flex;align-items:baseline;gap:12px;margin-top:15px}
.case-tile .idx{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--mid)}
.case-tile .title{font-family:var(--serif);font-weight:400;line-height:1.15;transition:color .3s;
  font-size:clamp(18px,calc(var(--vwu) * 1.25),27px)}
.case-tile:hover .title{color:var(--accent)}
.case-tile .sub{display:block;margin-top:7px;font-size:12px;letter-spacing:.04em;color:var(--accent)}
@media(max-width:900px){.case-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.case-tiles{grid-template-columns:1fr}.cases .c-top{grid-template-columns:1fr}}

/* ===== KONTAKT ========================================================== */
.kontakt{border-top:1px solid var(--line);background:var(--cream-3)}
.kontakt-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;
  gap:clamp(36px,calc(var(--vwu) * 5),120px);
  padding:clamp(92px,calc(var(--vwu) * 7),150px) var(--hpad) clamp(94px,calc(var(--vwu) * 7.2),154px)}
.kontakt h2{font-family:var(--serif);font-weight:300;line-height:.96;letter-spacing:-.008em;
  font-size:clamp(38px,calc(var(--vwu) * 4.2),94px)}
.kontakt .k-lead{margin-top:clamp(22px,2.6vh,36px);max-width:min(560px,100%);font-size:15px;line-height:1.75;color:var(--accent);text-wrap:pretty}
.kontakt .k-direct{margin-top:clamp(30px,4vh,52px);display:flex;flex-direction:column;gap:clamp(8px,1.2vh,14px)}
.kontakt .k-direct a{font-family:var(--serif);font-weight:300;line-height:1.2;color:var(--ink);text-decoration:none;
  font-size:clamp(22px,calc(var(--vwu) * 1.9),38px);width:fit-content;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.kontakt .k-direct a:hover{color:var(--accent);border-bottom-color:var(--line)}
.kontakt .k-meta{margin-top:clamp(26px,3vh,42px);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
/* formularz: pola bez ramek, sam podkreślnik; przycisk to link z kreską, nie pigułka */
.kontakt .form{display:flex;flex-direction:column;justify-content:flex-start;width:100%;max-width:560px;justify-self:end}
.kontakt .f-h{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mid);margin-bottom:clamp(22px,2.6vh,34px)}
.kontakt .field{display:flex;flex-direction:column-reverse;cursor:text}
.kontakt .field+.field{margin-top:clamp(28px,3.4vh,44px)}
.kontakt .field input,.kontakt .field textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;
  font-family:var(--serif);font-size:clamp(19px,calc(var(--vwu) * 1.35),25px);line-height:1.4;color:var(--ink);
  outline:none;resize:none;padding:0 0 12px;display:block}
.kontakt .field input{height:46px}
.kontakt .field textarea{min-height:104px}
.kontakt .field input:focus,.kontakt .field textarea:focus{border-bottom-color:var(--ink)}
.kontakt .field>span{display:block;margin:0 0 12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.kontakt .submit{margin-top:clamp(32px,3.8vh,52px);display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
/* prostokąt z kreską – ten sam język co ramka strony; bez pigułek i wypełnień */
.kontakt .submit button{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:0;padding:18px 44px;cursor:pointer;
  transition:background .3s,color .3s;order:2}
.kontakt .submit button:hover{background:var(--ink);color:var(--cream)}
.kontakt .submit .note{font-size:11px;letter-spacing:.04em;color:var(--mid);order:1}
@media(max-width:900px){
  .kontakt-in{grid-template-columns:1fr;gap:clamp(40px,6vh,64px);padding-top:64px;padding-bottom:72px}
}

/* stopka: pole treści ma 50% okna (scale.js), więc cztery kolumny potrzebują
   mniejszych odstępów niż w obecnej wersji — inaczej łamią się w pionie */
.f-top{gap:clamp(30px,4vh,48px) clamp(24px,calc(var(--vwu) * 2.6),64px);justify-content:space-between}
.f-top .f-nav a,.f-top .f-contact a{white-space:nowrap}
@media(max-width:1100px){.f-top{grid-template-columns:repeat(2,auto)}}

/* ===== DROBIAZGI ======================================================== */
.works{border-top:1px solid var(--line)}
.works-grid .wc{border-radius:calc(var(--r) * .6)}
.beta-flag{position:fixed;left:calc(var(--frame) + 14px);bottom:calc(var(--frame) + 54px);z-index:40;
  display:flex;gap:14px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.beta-flag a{color:var(--mid);text-decoration:none;border-bottom:1px solid transparent;padding:2px 0;transition:.3s}
.beta-flag a:hover{color:var(--ink)}
.beta-flag a.on{color:var(--ink);border-bottom-color:var(--line)}

@media(max-width:1024px){.rail-card{height:clamp(230px,42vh,400px)}}
@media(max-width:640px){
  .hero2{height:clamp(400px,70svh,700px)}
  .rail-card{height:clamp(210px,36vh,320px)}
  .rail-card.lead{aspect-ratio:4/3}
  .cases{padding-left:var(--hpad);padding-right:var(--hpad)}
  .beta-flag{display:none}
}

/* =====================================================================
   WERSJA B — więcej treści na ekranach poniżej 4K
   Powód: `scale.js` zwęża pole treści do 50% szerokości okna, żeby HD
   wyglądało jak 4K. Efekt uboczny: na HD widać dokładnie tyle samo, co
   na 4K, tylko dwa razy mniejsze. Tu pole treści jest szersze (__HOMEK
   = 0.35), a jednostka typografii (--vwu) zostaje ta sama co poprzednio,
   więc rośnie ILOŚĆ widocznej treści, nie rozmiar liter.
   Na 4K nic się nie zmienia: tam pole i tak ma 1920 px.
   ===================================================================== */
.chap-head{padding-top:clamp(72px,calc(var(--vwu) * 5.8),150px);padding-bottom:clamp(72px,calc(var(--vwu) * 5.8),150px)}
.cat2{padding:clamp(46px,calc(var(--vwu) * 3.8),92px) 0 clamp(54px,calc(var(--vwu) * 4.5),112px)}
.cat2-head{padding-bottom:clamp(34px,calc(var(--vwu) * 3),80px)}
.rail-card{height:clamp(250px,29vh,600px)}
/* WYSOKOSC KARTY: 46vh -> 29vh (2026-09-03, zgloszenie Jarka „w HD widac max jedna sekcje").
   Sufit 600 px trafial TYLKO na UHD: przy oknie 2070 px 46vh to 952 px, wiec obowiazywalo
   600 px = 29% okna. Na HD (950 px) sufit nie dzialal i karta brala pelne 46vh = 437 px,
   czyli 46% okna — POLTORA RAZA WIEKSZA CZESC EKRANU niz na UHD. Stad cala roznica.
   29vh to dokladnie ta sama czesc okna, ktora karta zajmuje na UHD (600/2070), a na UHD
   nadal wypada 600 px (29% z 2070), czyli tam NIC SIE NIE ZMIENIA — sufit i tak by zaciasl.
   Zmierzone przy 1920x950: sekcja 805 -> 643 px, widocznych sekcji 0,94 -> 1,27. */
.cases{padding:clamp(74px,calc(var(--vwu) * 5.8),150px) var(--hpad)}
.kontakt-in{padding:clamp(76px,calc(var(--vwu) * 5.8),150px) var(--hpad)}
@media(max-width:2200px){.hero2{height:clamp(370px,48svh,680px)}}

/* ── SYGNATURA W STOPCE — tylko telefon (2026-08-27) ─────────────────────── */
footer .f-brand{display:block;padding:clamp(26px,3.6vh,42px) var(--hpad) 0;text-align:right}
/* SYGNATURA (2026-08-31, zgloszenie Jarka): „Photo · Video · Aerial" ma byc DOKLADNIE tak
   szerokie jak „Things done right." i lezec blizej. `p` jest inline-block, wiec ma szerokosc
   dluzszej linii; `span` dostaje te szerokosc i justowanie ostatniej linii — odstepy same
   sie rozkladaja, w kazdym stopniu pisma. Ujemny margines z prawej zdejmuje ogon
   letter-spacingu po ostatniej literze, inaczej linia jest o wlos za szeroka. */
footer .f-brand p{display:inline-block;text-align:left}
footer .f-brand p span{width:100%;margin-top:7px;margin-right:-.24em;
  text-align:justify;text-align-last:justify}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
footer .f-brand p{font-family:var(--serif);font-weight:300;line-height:1.12;color:var(--ink);
  font-size:clamp(23px,7.2vw,31px)}
footer .f-brand p span{display:block;margin-top:11px;font-family:var(--sans);font-size:10.5px;
  font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--mid)}
@media(max-width:760px){
  footer .f-brand{display:block;padding:clamp(32px,5.5vh,56px) var(--hpad) 0;text-align:left}
  footer .f-top{display:none}
  .f-copy{text-align:left;padding-top:20px}
}

/* ── PRZYCISKI W SEKCJI KONTAKTU (2026-08-27) ──────────────────────────────
   Zastąpiły formularz. Stoją w tej samej kolumnie siatki, w której był `.form`. */
.k-akcje{display:flex;flex-direction:column;justify-content:center;gap:14px;
  width:100%;max-width:420px}
.k-btn{display:flex;align-items:center;justify-content:center;min-height:66px;
  border:1px solid var(--ink);background:var(--ink);color:var(--cream);text-decoration:none;
  border-radius:12px;font-family:var(--sans);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;transition:.25s}
.k-btn.pusty{background:none;color:var(--ink)}
.k-btn:hover{opacity:.82}
.k-btn:active{opacity:.68}
@media(max-width:760px){ .k-akcje{max-width:none;gap:11px} .k-btn{min-height:56px;font-size:11px} }
@media (hover:none) and (pointer:coarse) and (max-height:560px){ .k-btn{min-height:48px} }

/* ═════════════════════════════════════════════════════════════════════════
   TELEFON — 2026-08-20, po obejrzeniu strony na iPhonie przez Jarka.
   Blok stoi NA KOŃCU arkusza celowo: wcześniejsze reguły mobilne przegrywały
   z sekcją „WERSJA B" wyżej, która jest bez media query i przez to zjadała je
   kolejnością. To był powód, dla którego kadry karuzeli wychodziły za ekran
   mimo istniejącej reguły `@media(max-width:640px)`.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── PION ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* KARUZELA. Kadry miały ustawianą WYSOKOŚĆ (46vh ≈ 388 px) i proporcję 4:3,
     więc szerokość wychodziła ~517 px na ekranie szerokim na 390 px — kadr
     wystawał poza ekran i nie było widać, że to karuzela. Teraz sterujemy
     SZEROKOŚCIĄ: kadr ma 78% ekranu, więc obok widać skrawek następnego —
     to on mówi „przesuń mnie palcem". */
  /* WYSOKOSC WPROST, BEZ `aspect-ratio` (2026-08-29, zgloszenie Jarka: „jak odpale strone
     w pionie i zmienie orientacje, zdjecia sa prawie kwadratowe; po odswiezeniu jest ok").
     Chromium liczy oba warianty tak samo (sprawdzone) — to blad iOS Safari: po OBROCIE
     nie przelicza pudelka, ktorego wysokosc bierze sie z `aspect-ratio`, wiec zostawala
     wysokosc z poprzedniej orientacji przy juz nowej szerokosci. Stad „prawie kwadratowe".
     Lekarstwo: nie zostawiac wysokosci do policzenia z proporcji — podac ja wprost, w `calc()`
     z tej samej szerokosci. Jednostki `vw` Safari po obrocie odswieza poprawnie, wiec kadr
     przelicza sie razem z ekranem. `--railw` = jedno miejsce na szerokosc kadru. */
  .rail{ --railw:min(78vw,340px) }
  .rail-card{ width:var(--railw); height:calc(var(--railw) * 3 / 4) }
  /* KASUJEMY PROPORCJE Z DUZEGO EKRANU — wysokosc jest juz podana wprost, a zostawiona
     w kaskadzie `aspect-ratio` to dokladnie ta sciezka, ktorej iOS Safari nie przelicza. */
  .rail-card,.rail-card.lead,.rail-card.shot,.rail-card.tall,.rail-card.more,
  .rail.film .rail-card,.rail.film .rail-card.lead,.rail.film .rail-card.more{ aspect-ratio:auto }
  /* PIONY TEZ 4:3 (2026-08-29, druga tura: „portret na iPhonie w pionie tez bardzo zle").
     Bylo `calc(--railw * 4/3)`, czyli kadr 3:4 — przy szerokosci 306 px wychodzilo z tego
     409 px wysokosci na ekranie wysokim na ~660 px. Jeden kadr zjadal dwie trzecie tego,
     co widac, i pasek przestawal wygladac jak pasek. Ta sama decyzja, co w poziomie:
     na telefonie WSZYSTKIE kadry sa 4:3 (film 16:9), piony sa kadrowane.
     Brak osobnej reguly dla `.tall` jest CELOWY — na duzym ekranie 3:4 zostaje. */
  .rail.film .rail-card{ height:calc(var(--railw) * 9 / 16) }
  .rail-track{padding-left:14px;padding-right:14px;scroll-padding-left:14px}

  /* Belka z logo, pasek na dole i przycisk „Kontakt" siedzą w js/menu.js — ten plik
     ładuje KAŻDA strona witryny, więc tamte reguły działają też w galeriach i sesjach.
     Tutaj zostaje wyłącznie to, czego nie ma nigdzie indziej: karuzela i hero. */
}

/* ── POZIOM ───────────────────────────────────────────────────────────── */
/* 390 px wysokości minus belka 123 minus pasek 48 zostawiało 187 px na treść.
   Tu każdy piksel ramy i nagłówka jest pikselem zabranym zdjęciom. */
/* WARUNEK, NIE SAMA SZEROKOŚĆ (2026-08-27). iPhone na boku ma 844–932 px szerokości,
   więc `orientation:landscape` łapało też iPada, a `max-height` musi iść w parze
   z pytaniem o palec. Ten sam warunek co w `css/rama.css` i w `js/scale.js`. */
@media (hover: none) and (pointer: coarse) and (max-height: 560px) {
  :root{ --frame: 0px }
  .shell{ inset:0; border:0 }                    /* pełna szerokość — bez ramy po bokach */
  .side{ display:none }

  /* PEŁNA SZEROKOŚĆ, ALE LAYOUT OMIJA WYSPĘ (polecenie Jarka 2026-08-27).
     Wcześniej odsuwał się od niej cały `.shell` i strona wyglądała na uciętą z obu
     stron. Teraz zdjęcia, film i hero idą od krawędzi do krawędzi, a odsuwa się
     wyłącznie TREŚĆ — przez `--hpad`, czyli jedną zmienną, z której korzystają
     wszystkie sekcje tekstowe (.position, .clients, .pillar-head, .cases, .brief,
     .f-top, .f-copy, ramka .cat-frame). */
  /* ══ TYPOGRAFIA W POZIOMIE = TA SAMA FORMUŁA CO W PIONIE ══════════════════
     Przyczyna „w pionie proporcje są dużo lepsze": `--vwu` — jednostka, z której
     liczy się prawie cała typografia i odstępy — jest zdefiniowana jako
     `min(1vw, 19.2px)`, czyli LICZY SIĘ Z SZEROKOŚCI. Na iPhonie w pionie
     1vw = 3,9 px, a po obróceniu 1vw = 8,44 px. Wszystko napędzane przez `--vwu`
     robiło się w poziomie 2,16 × większe, mimo że ekran fizycznie jest ten sam.

     Poprawka nie zmienia formuły, tylko bok, z którego się ją liczy: w poziomie
     krótszą krawędzią jest WYSOKOŚĆ, więc `1vw` zamienia się na `1svh`.
     100svh na iPhonie w poziomie to ~390 px, czyli dokładnie tyle, ile 100vw
     w pionie — rozmiary wychodzą co do piksela takie same jak w pionie.
     `svh`, nie `dvh`: `dvh` zmienia się przy zwijaniu paska adresu i typografia
     by przy scrollowaniu oddychała.

     Dzięki temu poniżej NIE MA ANI JEDNEGO ROZMIARU FONTU WPISANEGO RĘCZNIE —
     zostały tylko odstępy (bo tych pionowych w poziomie musi być mniej) i jeden
     świadomy wyjątek: drukowane punkty. */
  :root{
    --vwu: min(1svh, 19.2px);
    --hpad: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  .rail-track{ padding-left:max(14px, env(safe-area-inset-left));
               padding-right:max(14px, env(safe-area-inset-right));
               scroll-padding-left:max(14px, env(safe-area-inset-left)) }

  /* 2026-08-27 — TU GINAL FILM W HEADERZE. Stalo tutaj `height:auto; min-height:0`,
     a `.h2-media` i `.h2-inner` sa `position:absolute` — czyli nie maja czym wypelnic
     rodzica i sekcja zwijala sie DO ZERA. Na ekranie zostawala sama kreska pod belka
     (zglosznie Jarka: "gruba linia zamiast hairline'a" — to obramowanie belki
     sklejone z obramowaniem zwinietego hero) i zadnego filmu.
     W poziomie hero dostaje realna wysokosc: 80% okna, ale nie wiecej niz 420 px,
     zeby nizej bylo widac, ze strona sie przewija. */
  .hero2{ height:clamp(220px, 80svh, 420px); min-height:0 }
  /* KADRY: WYSOKOSC WPROST — patrz komentarz w bloku pionowym (blad obrotu w iOS Safari). */
  .rail{ --railw:min(42vw,280px) }
  .rail-card{ width:var(--railw); height:calc(var(--railw) * 3 / 4) }
  /* KASUJEMY PROPORCJE Z DUZEGO EKRANU — wysokosc jest juz podana wprost, a zostawiona
     w kaskadzie `aspect-ratio` to dokladnie ta sciezka, ktorej iOS Safari nie przelicza. */
  .rail-card,.rail-card.lead,.rail-card.shot,.rail-card.tall,.rail-card.more,
  .rail.film .rail-card,.rail.film .rail-card.lead,.rail.film .rail-card.more{ aspect-ratio:auto }
  .rail.film .rail-card{ height:calc(var(--railw) * 9 / 16) }
  /* ── PROPORCJE KADROW: TE SAME CO W PIONIE (2026-08-29, zgloszenie Jarka:
     „proporcje kadrow na stronie glownej zmieniaja sie") ──────────────────────
     Skad sie to bralo: komplet proporcji dla telefonu (`.lead` 4:3 zamiast 16:10)
     siedzi w bloku `@media(max-width:760px)`, a iPhone POLOZONY NA BOK ma 844-932 px
     szerokosci, wiec ten warunek go NIE lapie. Ten blok z kolei zdejmowal wysokosc
     (`height:auto`), zeby kadr liczyl sie z szerokosci — i kadr wracal do proporcji
     DESKTOPOWYCH. Efekt: obrot telefonu przekadrowywal kazde zdjecie.
     To ten sam blad, co przy typografii: `max-width` nie jest testem na telefon.
     Dopisujemy wiec tutaj dokladnie ten sam komplet, co w pionie. */
  /* PIONY NIE STOJA W POZIONIE (polecenie Jarka 2026-08-29: „portrety nie powinny byc
     w pionie, a juz na pewno nie w takim dlugim"). Na ekranie wysokim na 393 px kadr 3:4
     zajmowal 373 px, czyli caly ekran — pasek przestawal wygladac jak pasek. W poziomie
     WSZYSTKIE kadry sa wiec 4:3 (film 16:9): poziome trzymaja swoja proporcje, pionowe
     dostaja to samo pole i sa kadrowane. Osiaga sie to przez BRAK osobnej reguly dla
     `.tall` powyzej — nie dopisuj jej tutaj, to nie przeoczenie. */
  .beta-flag{ display:none }        /* przełącznik wersji wchodził wprost na treść */
  /* ── OPISY KATEGORII W POZIOMIE (2026-08-27) ──────────────────────────────
     `@media(max-width:1100px)` wyżej zwija `.cat2-head` do JEDNEJ kolumny, a iPhone
     na boku ma 844 px — więc łapał się w to zwinięcie. Efekt: tytuł, opis, lista
     zakresu i link stały jeden pod drugim w wąskim słupku przy lewej krawędzi,
     a prawa połowa ekranu świeciła pustką (zgłoszenie Jarka: „wszystko na sobie,
     a z prawej dużo miejsca").
     W poziomie szerokości jest aż nadto, więc wracamy do układu z dużego ekranu:
     tytuł po lewej, opis + zakres + link po prawej. Do tego więcej powietrza
     od góry — sekcja zaczynała się tuż pod kreską. */
  /* NUMER PORZĄDKOWY NACHODZIŁ NA TYTUŁ ROZDZIAŁU (zgłoszenie Jarka). `.chap-no` jest
     `position:absolute` z `top:clamp(36px,…)`, a padding górny sekcji wynosił 34 px —
     czyli cyfra lądowała dokładnie tam, gdzie zaczyna się „Reklama". Odsuwamy cyfrę
     pod samą górę i robimy nad nagłówkiem tyle miejsca, żeby się zmieściła. */
  .chap-head{ padding-top:52px; padding-bottom:26px }
  .chap-no{ top:16px }
  .chap-head .desc{ max-width:min(560px,78vw) }

  .cat2{ padding:30px 0 28px }
  /* `align-items:start`, NIE `center` (korekta Jarka): nazwa kategorii ma zaczynać się
     równo z pierwszą linią opisu, nie stać na środku jego wysokości. Ujemny `margin-top`
     wyrównuje optycznie — wersalik 34 px i tekst 13 px mają inną wysokość linii. */
  .cat2-head{ grid-template-columns:minmax(0,.7fr) minmax(0,1fr);
              align-items:start;
              gap:0 clamp(22px,3.4vw,44px);
              padding-bottom:20px }
  /* NAZWA KATEGORII WYŚRODKOWANA w swojej kolumnie — czyli w polu między wyspą
     a opisem (polecenie Jarka). Do tego `align-items:center` wyżej, żeby stała
     na osi bloku opisu, a nie przyklejona do jego pierwszej linii. */
  .cat2-head .c-l{ text-align:center }
  .cat2-head h3{ margin-top:-.12em }
  .cat2-head p{ max-width:none }
  /* JEDYNY ŚWIADOMY WYJĄTEK OD FORMUŁY. `.scope` ma sztywne 10.5 px, więc w pionie
     i w poziomie jest identyczne — a Jarek dwa razy zgłosił, że w poziomie jest za
     duże. Powód jest optyczny, nie arytmetyczny: to WERSALIKI z trackingiem .2em,
     rozciągnięte na całą szerokość prawej kolumny, więc ważą więcej niż opis nad
     nimi. Tu jedna liczba do kręcenia, jeśli dalej nie gra. */
  /* ROZMIAR ZOSTAJE TAKI SAM JAK W PIONIE (2026-08-29). Stalo tu `font-size:9.5px`
     jako rekompensata — Jarek dwa razy zglaszal, ze w poziomie wersaliki sa za duze,
     wiec byly recznie zanizane. Zaniżanie nie pomagalo, bo powiekszal je iOS Safari
     (Text Autosizing), a nie arkusz. Autosizing jest juz wylaczony w `css/rama.css`,
     wiec kompensata szkodzi: bez niej poziom pokazuje DOKLADNIE to samo, co pion,
     czyli 10,5 px z reguly podstawowej. Zostaja tylko odstepy — tych w poziomie
     musi byc mniej, bo ekran jest niski. */
  .cat2-head .scope{ max-width:none; margin-top:12px; gap:4px }
  .cat2-head .lnk{ margin-top:14px }
}


/* ═════════════════════════════════════════════════════════════════════════
   KADR USTAWIONY W EDYTORZE  (2026-08-29)
   Edytor („Strona główna" → klik w zdjęcie → Kadr) zapisuje kadr przy samym <img>:
   `object-position` mówi, CO ma być widoczne, a zmienna `--kz` — jak blisko.

   DLACZEGO ZBLIŻENIE IDZIE PRZEZ `transform`, a nie przez rozmiar elementu, jak
   `applyCrop()` w galeriach: tam kadry są `position:absolute; inset:0` w swoim pudełku,
   więc można im dać `width:z*100%` i przesunąć. Tutaj zdjęcia siedzą w zwykłym układzie
   i to one nadają wysokość — powiększenie rozmiarem rozpychałoby stronę.

   PUŁAPKA, KTÓREJ TO UNIKA: gdyby edytor wpisywał `transform` wprost w atrybut `style`,
   zabiłby powiększenie na najechanie (styl inline zawsze wygrywa z arkuszem, niezależnie
   od wagi). Dlatego inline idzie tylko LICZBA, a mnożenie zostaje w arkuszu — każde
   miejsce z własnym hoverem mnoży swoje powiększenie przez `--kz`.
   Zdjęcie bez ustawionego kadru nie ma klasy `kadr`, więc nie dotyczy go żadna z tych reguł.
   ═════════════════════════════════════════════════════════════════════════ */
.kadr{transform:scale(var(--kz,1))}
.rail-card:hover img.kadr,.rail-card:hover video.kadr{transform:scale(calc(var(--kz,1) * 1.03))}
.case-tile:hover img.kadr{transform:scale(calc(var(--kz,1) * 1.04))}
.works-grid a.wc:hover img.kadr{transform:scale(calc(var(--kz,1) * 1.06))}


/* ==== blok 3 z dawnego <head> index.html ==== */

/* ══ POPRAWKI UKLADU (2026-08-31, po uwagach Jarka) ═════════════════════════
   Ten blok stoi na koncu <head>, ZA `rama.css` — celowo. Reguly stopki i hero siedza
   w kilku miejscach pliku i w mediach; dopisywanie ich w srodku konczylo sie tym,
   ze pozniejsza kopia wygrywala kaskade. */

/* HERO. Po zdjeciu H1 nadtytul zostal sam u gory i wyglada jak resztka — schodzi tez.
   Zostaje sam opis: wezszy wiersz (lepiej sie czyta) i bez gornego marginesu po H1. */
.hero2 .hero-sub{margin-top:0;max-width:min(700px,86vw);
  font-size:clamp(16px,calc(11px + calc(var(--vwu) * 0.46)),23px);line-height:1.72}



/* ==== blok 4 z dawnego <head> index.html ==== */

/* ══ KONTAKT I STOPKA — KOMPOZYCJA OD NOWA (2026-08-31) ═════════════════════
   Wlasne klasy zamiast dopisywania do starych: `.kt-` i `.st-`. Dzieki temu nic tu nie
   walczy z regulami, ktore zostaly w pliku po poprzednich wersjach, i wszystko, co
   dotyczy tych dwoch sekcji, stoi w JEDNYM miejscu. */

/* ── KONTAKT ─────────────────────────────────────────────────────────────── */
.kontakt .kt{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;gap:clamp(40px,calc(var(--vwu) * 5),110px);
  padding:clamp(84px,calc(var(--vwu) * 6.4),150px) var(--hpad)}
.kontakt .kt-lewa h2{margin:0}
.kontakt .kt-lead{margin-top:clamp(20px,2.4vh,32px);max-width:52ch;
  font-size:15px;line-height:1.75;color:var(--accent);text-wrap:pretty}

/* Prawa kolumna to JEDEN blok kontaktu. Cienka linia u gory wiaze go z linia bazowa
   naglowka obok i daje mu wlasna ramke bez rysowania pudelka. */
.kontakt .kt-prawa{display:flex;flex-direction:column;align-items:flex-start;
  padding-top:clamp(14px,1.8vh,26px);border-top:1px solid var(--line);width:100%}
.kontakt .kt-h{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mid)}
.kontakt .kt-duzy{margin-top:clamp(14px,1.8vh,22px);font-family:var(--serif);font-weight:300;
  line-height:1.15;color:var(--ink);text-decoration:none;width:fit-content;
  font-size:clamp(21px,calc(var(--vwu) * 1.7),34px);
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.kontakt .kt-duzy:hover{color:var(--accent);border-bottom-color:var(--line)}
.kontakt .kt-akcje{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vh,44px)}
.kontakt .kt-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 clamp(28px,calc(var(--vwu) * 2.2),46px);min-width:172px;
  border:1px solid var(--line);border-radius:10px;background:none;color:var(--ink);
  font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.kontakt .kt-btn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
@media(max-width:900px){
  .kontakt .kt{grid-template-columns:1fr;gap:clamp(34px,5vh,56px)}
  .kontakt .kt-prawa{max-width:520px}
  .kontakt .kt-akcje{width:100%}
  .kontakt .kt-btn{flex:1 1 160px}
}

/* ── STOPKA ──────────────────────────────────────────────────────────────── */
/* STOPKA — CALOSC (uklad, typografia, telefon) SIEDZI W `css/rama.css`.
   2026-09-04, polecenie Jarka: „wszedzie ta sama stopka, w galeriach jest jeszcze inna".
   Reguly byly tutaj, wiec obowiazywaly TYLKO strone glowna, a 14 galerii i sesji mialo
   wlasny markup `<footer><div class="f-top">` i wlasne style. Teraz markup jest jeden
   (`footer.st`) we wszystkich 15 plikach, a arkusz jeden — szukaj: „STOPKA" w rama.css. */

}
