/* ============================================================
   DRUKARNIA LUBLIN — ODBITKA PRÓBNA
   Świat tej jednej podstrony: papier i tusz. Wszystko poniżej jest
   przypięte do `body.papier`, więc żadna reguła nie ma jak dosięgnąć
   pozostałych stron serwisu — te zostają w dotychczasowym, ciemnym
   języku wizualnym.

   Materia: ciepły papier offsetowy jako pełne pole strony, czerń tuszu
   na tekst, czerwień ołówka korektorskiego jako jedyny akcent, pasek
   kontrolny CMYK użyty raz — jako przyrząd, nie ozdoba. Głębia pochodzi
   z cienia arkusza leżącego na blacie, nie z poświaty.
   ============================================================ */

body.papier{
  /* Odbitka nie jest już kartką na blacie, tylko odbitką ekranową:
     kolumna treści trzyma paletę reszty serwisu, a warsztatowe znaki
     (pasowanie, pasek kontrolny, czerwona korekta) zostają. */
  --papier:#0a111b;
  --papier-cien:#070d15;
  --blat:#02040a;
  --tusz:#eaf3ff;
  --tusz-2:rgba(206,226,255,.74);
  --tusz-3:rgba(206,226,255,.52);
  --korekta:#ff5e6d;
  --akcent:#7cb3ff;
  --linia:rgba(124,179,255,.16);
  --linia-mocna:rgba(124,179,255,.38);
  --cyan:#00a3e0;
  --magenta:#e6007e;
  --zolty:#ffd200;
  --szybko:cubic-bezier(.2,.8,.2,1);

  /* Wymiary kolumny trzymane w jednym miejscu — uwagi korektorskie
     liczą z nich, ile marginesu zostaje po bokach. */
  --pad-ark:clamp(20px,4vw,72px);
  --szer-ark:min(1080px,calc(100vw - 440px));
  --marg-l:max(220px,calc((100vw - var(--szer-ark)) / 2));
  --marg-p:calc(100vw - 16px - var(--marg-l) - var(--szer-ark));

  margin:0;background:#02040a;color:var(--tusz);
  font-family:'Archivo','Montserrat',system-ui,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Powierzchnie, których nikt nie projektuje, a które i tak niosą świat:
   zaznaczenie, kursor tekstowy, obwódka focusu i pasek przewijania. */
body.papier ::selection{background:var(--akcent);color:#04070f}
body.papier{caret-color:var(--akcent);scrollbar-color:var(--tusz-3) #02040a}
body.papier ::-webkit-scrollbar{width:12px;height:12px}
body.papier ::-webkit-scrollbar-track{background:#02040a}
body.papier ::-webkit-scrollbar-thumb{background:var(--tusz-3);border:3px solid #02040a}
body.papier :focus-visible{outline:2px solid var(--akcent);outline-offset:3px}

/* ---------------- blat ----------------
   Pełnoszerokościowa warstwa niosąca to samo tło, co pozostałe strony:
   ciemne heksy. Jest kryjąca i leży nad przypiętą stopką (z-index 0),
   więc stopka wychodzi dopiero na odcinku `foot__space` — dokładnie tak
   jak na innych podstronach. */
.blat{
  position:relative;z-index:1;
  background-color:#02040a;
  background-image:linear-gradient(rgba(2,4,9,.955),rgba(2,4,9,.955)),url('assets/hex.svg');
  background-repeat:no-repeat,repeat;
  background-size:auto,84px 48.497px;
  background-attachment:fixed,fixed;
  padding-bottom:clamp(20px,4vw,60px);
}

/* ---------------- arkusz ----------------
   Papier leży na blacie: ma własny cień z przesunięciem i rozmyciem,
   krzyże pasowania w narożnikach i linie cięcia na krawędziach. */
.ark{
  /* Warstwa nad przypiętą stopką (`.foot` ma z-index 0 i leży pod
     treścią każdej podstrony) — bez tego arkusz znikał za stopką. */
  position:relative;z-index:1;
  /* Po lewej stoi sygnet, po prawej przycisk menu — kolumna mieści się
     między nimi i nigdy nie wchodzi pod żaden z nich. */
  width:var(--szer-ark);
  /* Lewy margines musi pomieścić sygnet przypięty do okna — stąd
     `max()`: arkusz stoi na środku, dopóki jest na to miejsce, a gdy
     go brakuje, odsuwa się w prawo zamiast wchodzić pod znak. */
  margin:clamp(18px,3.4vw,54px) auto clamp(28px,4vw,64px) var(--marg-l);
  padding:clamp(26px,3.4vw,54px) var(--pad-ark) clamp(40px,5vw,86px);
  background:linear-gradient(180deg,#0b1320 0%,#070d16 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.45),
             0 22px 48px rgba(0,0,0,.5),
             0 70px 140px rgba(0,0,0,.45);
}
/* ziarno odbitki — ta sama ilość szumu, tylko rozjaśniająca */
.ark::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.4;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.ark > *{position:relative;z-index:1}

/* krzyże pasowania w narożnikach arkusza */
.ark__paser{position:absolute;z-index:2;width:26px;height:26px;pointer-events:none}
.ark__paser svg{width:100%;height:100%;display:block;color:var(--tusz)}
.ark__paser--lg{left:14px;top:14px}
.ark__paser--pg{right:14px;top:14px}
.ark__paser--ld{left:14px;bottom:14px}
.ark__paser--pd{right:14px;bottom:14px}

/* pasek kontrolny CMYK — przyrząd do oceny odbitki */
.ark__kontrolka{
  position:absolute;right:clamp(20px,4vw,72px);top:0;z-index:2;
  display:flex;align-items:center;gap:0;
  transform:translateY(-50%);
}
.ark__kontrolka i{display:block;width:clamp(16px,1.6vw,24px);height:clamp(7px,.8vw,11px)}
.ark__kontrolka i:nth-child(1){background:var(--cyan)}
.ark__kontrolka i:nth-child(2){background:var(--magenta)}
.ark__kontrolka i:nth-child(3){background:var(--zolty)}
.ark__kontrolka i:nth-child(4){background:var(--tusz)}
.ark__kontrolka b{
  margin-left:10px;font-size:9px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tusz-3);
}

/* ---------------- metryczka zlecenia ---------------- */
.ark__metryka{
  display:flex;flex-wrap:wrap;gap:6px clamp(14px,2.4vw,34px);
  align-items:baseline;justify-content:space-between;
  margin:0 0 clamp(26px,4vh,52px);
  padding-bottom:10px;border-bottom:1px solid var(--linia-mocna);
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tusz-2);
}
.ark__metryka span{white-space:nowrap}
.ark__metryka a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linia)}
.ark__metryka a:hover{color:var(--akcent);border-color:var(--akcent)}
.ark__metryka em{font-style:normal;color:var(--akcent)}

/* ---------------- tytuł odbitki ----------------
   Jeden autorski moment ruchu na stronie: tytuł wchodzi rozpasowany,
   jak nietrafiona nakładka kolorów, i schodzi do pasowania. */
.ark__tytul{
  position:relative;margin:0;
  /* Vogjer — krój nagłówków całego serwisu. W tym zdaniu nie ma polskich
     znaków, więc krój niesie je w całości, bez podmiany na zastępczy. */
  font-family:'Vogjer','Archivo',sans-serif;
  font-weight:400;
  font-size:clamp(30px,5vw,68px);line-height:1.02;letter-spacing:.005em;
  text-transform:uppercase;text-wrap:balance;color:var(--tusz);
}
.ark__tytul i{position:absolute;inset:0;font-style:normal;pointer-events:none}
.ark__tytul i:nth-of-type(1){color:var(--cyan);mix-blend-mode:multiply}
.ark__tytul i:nth-of-type(2){color:var(--magenta);mix-blend-mode:multiply}
.js-ark .ark__tytul i{opacity:.85;transition:transform 1.4s var(--szybko),opacity 1.4s var(--szybko)}
.js-ark .ark__tytul i:nth-of-type(1){transform:translate3d(-11px,-6px,0)}
.js-ark .ark__tytul i:nth-of-type(2){transform:translate3d(9px,7px,0)}
.js-ark .ark__tytul.w-pasowaniu i{transform:none;opacity:0}

.ark__lead{
  max-width:64ch;margin:clamp(16px,2.4vh,26px) 0 0;
  font-size:clamp(14px,1.05vw,17px);line-height:1.66;color:var(--tusz-2);
}

/* ---------------- pieczęć: główne działanie ----------------
   Gumowa pieczątka: w spoczynku lekko uniesiona nad papierem, pod
   naciskiem siada na arkusz i zostawia odbicie. */
.stempel{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 26px;border:1.5px solid var(--akcent);
  color:var(--akcent);background:rgba(124,179,255,.06);text-decoration:none;
  font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transform:rotate(-2.1deg);
  box-shadow:2px 3px 0 rgba(124,179,255,.16);
  transition:transform .28s var(--szybko),box-shadow .28s var(--szybko),
             background-color .28s var(--szybko),color .28s var(--szybko);
}
.stempel svg{width:18px;height:18px;flex:none}
/* `.sek a` maluje odnośniki w treści; pieczęć nie jest odnośnikiem
   w akapicie, więc wyłamuje się z tamtych reguł w całości. */
.sek a.stempel,.zatwierdz a.stempel{
  color:var(--akcent);text-decoration:none;
}
.sek a.stempel:hover,.zatwierdz a.stempel:hover{
  color:#04070f;text-decoration:none;
}
.stempel:hover{
  transform:rotate(-2.1deg) translate(1px,2px);
  box-shadow:1px 1px 0 rgba(124,179,255,.24);
  background:var(--akcent);color:#04070f;
}
.stempel:active{transform:rotate(-2.1deg) translate(2px,3px);box-shadow:none}
.stempel--duzy{padding:20px 34px;font-size:15px}

.ark__akcje{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,34px);
  margin:clamp(22px,3.2vh,40px) 0 0;
}
.odnosnik{
  color:var(--tusz);text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--linia-mocna);padding-bottom:3px;
  transition:color .3s var(--szybko),border-color .3s var(--szybko);
}
.odnosnik:hover{color:var(--akcent);border-color:var(--akcent)}

/* ---------------- uwagi korektorskie ----------------
   Czerwona ręka korektora pisze na boku, poza kolumną — tam, gdzie
   w drukarni notuje się poprawki na marginesie odbitki. Pozycja liczona
   jest z szerokości kolumny i jej marginesu, więc uwaga zawsze trafia
   w wolne pole, nigdy pod treść. Kreska rysuje się przy wejściu w kadr,
   podpis pojawia się po niej. */
.kor{
  position:absolute;top:0;z-index:2;pointer-events:none;
  font-family:'Caveat','Segoe Script',cursive;
  font-size:clamp(14px,1.05vw,19px);line-height:1.24;color:var(--korekta);
}
.kor svg{display:block;width:100%;height:auto;overflow:visible;color:var(--korekta)}
.kor svg path{
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.js-ark .kor svg path{
  stroke-dasharray:var(--dl,300);stroke-dashoffset:var(--dl,300);
  transition:stroke-dashoffset 1.1s var(--szybko);
}
.js-ark .kor.w-kadrze svg path{stroke-dashoffset:0}
.js-ark .kor b{
  display:block;margin-top:4px;font-weight:400;opacity:0;transform:translateY(6px);
  transition:opacity .6s var(--szybko) .5s,transform .6s var(--szybko) .5s;
}
.js-ark .kor.w-kadrze b{opacity:1;transform:none}

.kor--l{
  left:calc(-1 * (var(--pad-ark) + var(--marg-l)) + 72px);
  width:calc(var(--marg-l) - 96px);
  transform:rotate(-1.4deg);
}
.kor--p{
  right:calc(-1 * (var(--pad-ark) + var(--marg-p)) + 66px);
  width:calc(var(--marg-p) - 90px);
  text-align:left;transform:rotate(1.2deg);
}
.kor--przy-cta{top:-12px}
.kor--prawa{top:6px}

/* Pod 1100 px marginesów już nie ma — uwagi wracają do toku treści,
   pod akapit, zamiast leżeć na czymkolwiek. */
@media (max-width:1100px){
  .kor{
    position:static;width:min(240px,86%);margin:clamp(12px,2vh,20px) auto 0;
    transform:none;text-align:left;
  }
}

/* Sekcje są układem odniesienia dla uwag leżących przy nich. */
.sek,.ark__akcje,.proces{position:relative}

/* ---------------- kadr wydrukowany na arkuszu ---------------- */
.kadr{margin:clamp(30px,4.4vh,58px) 0 0}
.kadr img{width:100%;height:auto;display:block}
.haslo{
  margin:clamp(30px,4.6vh,60px) 0 0;max-width:22ch;
  font-family:'Archivo','Montserrat',sans-serif;font-weight:800;
  font-size:clamp(21px,3vw,42px);line-height:1.04;letter-spacing:-.03em;
  text-transform:uppercase;color:var(--tusz);
}
.haslo em{font-style:normal;color:var(--akcent)}

.kadr figcaption,.podpis{
  display:flex;gap:10px;align-items:baseline;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--linia);
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tusz-3);
}
.kadr figcaption em,.podpis em{font-style:normal;color:var(--akcent)}

/* ---------------- sekcje arkusza ---------------- */
.sek{margin:clamp(52px,8vh,110px) 0 0;scroll-margin-top:40px}
.sek__h{
  margin:0 0 clamp(14px,2vh,22px);
  font-family:'Archivo','Montserrat',sans-serif;
  font-weight:700;font-size:clamp(19px,2.1vw,30px);line-height:1.18;
  letter-spacing:-.018em;text-transform:uppercase;color:var(--tusz);
  text-wrap:balance;
}
.sek p{max-width:66ch;margin:0 0 clamp(10px,1.4vh,16px);color:var(--tusz-2)}
.sek a{color:var(--tusz);text-decoration:underline;text-decoration-thickness:1px;
       text-underline-offset:3px;text-decoration-color:var(--linia-mocna);
       transition:color .25s var(--szybko),text-decoration-color .25s var(--szybko)}
.sek a:hover{color:var(--akcent);text-decoration-color:var(--akcent)}

/* dwie kolumny tam, gdzie tekst prowadzi rozmowę z pustym marginesem */
.sek--para{
  display:grid;gap:clamp(18px,3vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start;
}
@media (max-width:860px){ .sek--para{grid-template-columns:1fr} }

/* ---------------- specyfikacja materiałów ----------------
   Nie kafle, tylko pozycje na arkuszu specyfikacji: nazwa, kropkowany
   wypełniacz, opis. Tak wygląda lista materiałów w zleceniu. */
.spec{margin:clamp(18px,2.6vh,30px) 0 0;border-top:1px solid var(--linia-mocna)}
.spec__poz{
  display:grid;gap:4px clamp(14px,2vw,30px);
  grid-template-columns:minmax(150px,.34fr) minmax(0,1fr);
  align-items:baseline;
  padding:clamp(12px,1.6vh,18px) 0;border-bottom:1px solid var(--linia);
  transition:background-color .25s var(--szybko);
}
.spec__poz:hover{background:rgba(124,179,255,.05)}
.spec__nazwa{
  margin:0;font-size:clamp(12px,1vw,15px);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tusz);
  display:flex;align-items:baseline;gap:10px;
}
.spec__nazwa::after{
  content:'';flex:1;height:0;border-bottom:1px dotted rgba(124,179,255,.3);
  transform:translateY(-3px);
}
.spec__poz p{margin:0;font-size:clamp(12.5px,.92vw,14.5px);color:var(--tusz-2)}

/* ---------------- proces: cztery przebiegi ---------------- */
.proces{list-style:none;margin:clamp(20px,3vh,34px) 0 0;padding:0}
.proces li{
  position:relative;display:grid;gap:4px clamp(16px,2.4vw,40px);
  grid-template-columns:clamp(54px,6vw,86px) minmax(0,1fr);
  padding:clamp(16px,2.2vh,26px) 0;border-top:1px solid var(--linia);
}
.proces li:last-child{border-bottom:1px solid var(--linia)}
.proces b{
  grid-row:span 2;align-self:start;
  font-family:'Archivo','Montserrat',sans-serif;font-weight:800;
  font-size:clamp(26px,3.4vw,50px);line-height:.9;letter-spacing:-.04em;
  color:var(--akcent);
}
.proces h3{
  margin:0;font-size:clamp(13px,1.05vw,16px);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tusz);
}
.proces p{margin:6px 0 0;max-width:58ch}

/* ---------------- uwagi do odbitki (FAQ) ---------------- */
.uwagi{margin:clamp(18px,2.6vh,30px) 0 0;border-top:1px solid var(--linia-mocna)}
.uwagi details{border-bottom:1px solid var(--linia)}
.uwagi summary{
  display:flex;align-items:baseline;gap:14px;
  padding:clamp(14px,1.8vh,20px) 0;cursor:pointer;list-style:none;
  font-size:clamp(13px,1vw,15.5px);font-weight:600;color:var(--tusz);
  transition:color .25s var(--szybko);
}
.uwagi summary::-webkit-details-marker{display:none}
.uwagi summary::before{
  content:'?';flex:none;width:20px;height:20px;
  display:grid;place-items:center;translate:0 2px;
  border:1.5px solid var(--akcent);border-radius:50%;
  font-size:11px;font-weight:700;color:var(--akcent);
  transition:background-color .25s var(--szybko),color .25s var(--szybko);
}
.uwagi summary:hover{color:var(--akcent)}
.uwagi details[open] summary::before{background:var(--akcent);color:#04070f}
.uwagi .odp{padding:0 0 clamp(16px,2.2vh,24px) 34px}
.uwagi .odp p{margin:0;max-width:64ch}

/* ---------------- zatwierdzenie: domknięcie arkusza ---------------- */
.zatwierdz{
  margin:clamp(52px,8vh,110px) 0 0;padding:clamp(28px,4vw,52px) 0 0;
  border-top:1px solid var(--linia-mocna);
  display:grid;gap:clamp(18px,3vw,46px);
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;
}
@media (max-width:860px){ .zatwierdz{grid-template-columns:1fr} }
.zatwierdz h2{
  margin:0;font-family:'Archivo','Montserrat',sans-serif;font-weight:800;
  font-size:clamp(22px,3.2vw,46px);line-height:1.06;letter-spacing:-.03em;
  text-transform:uppercase;text-wrap:balance;
}
.zatwierdz p{margin:clamp(12px,1.8vh,18px) 0 0;max-width:56ch;color:var(--tusz-2)}
.zatwierdz__pole{
  display:grid;gap:10px;justify-items:start;
  padding:clamp(18px,2.4vw,28px);border:1px dashed var(--linia-mocna);
}
.zatwierdz__pole small{
  font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tusz-3);
}
.zatwierdz__tel{
  font-size:clamp(14px,1.2vw,18px);font-weight:700;letter-spacing:.04em;
  color:var(--tusz);text-decoration:none;
}
.zatwierdz__tel:hover{color:var(--akcent)}

/* Odcinek między arkuszem a stopką: ten sam element co na pozostałych
   podstronach, tylko wypełniony tłem blatu. */
body.papier .sub__fade{
  background-color:#02040a;
  background-image:linear-gradient(rgba(2,4,9,.955),rgba(2,4,9,.955)),url('assets/hex.svg');
  background-repeat:no-repeat,repeat;background-size:auto,84px 48.497px;
}

/* Przycisk menu i kursor zostają dokładnie takie, jak na pozostałych
   stronach — kolumna jest ciemna, więc nic nie wymaga poprawki. */

/* ---------------- wejścia ----------------
   Jedna reguła na całą stronę: element wypływa spod krawędzi papieru.
   Bez rozmyć i bez skalowania — arkusz nie faluje. */
.js-ark [data-ark]{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .9s var(--szybko),transform 1.1s var(--szybko);
  transition-delay:calc(var(--k,0) * .07s);
}
.js-ark [data-ark].w-kadrze{opacity:1;transform:none}

/* Telefon: sygnet 3D schodzi z tej podstrony. Kolumna jest tu wąska,
   znak wchodził na pierwszy wiersz metryczki, a scena WebGL kosztuje
   na telefonie najwięcej. Na pozostałych stronach zostaje bez zmian. */
@media (max-width:760px){
  body.papier .sygnet{display:none}
  .ark{padding-top:clamp(56px,10vw,86px)}
}
@media (max-width:1100px){
  /* Na węższych ekranach kolumna wraca na całą szerokość, a sygnet
     i przycisk menu leżą nad nią — stąd zapas u góry. */
  .ark{--szer-ark:92vw;--marg-l:4vw;width:92vw;margin-left:auto;margin-right:auto;
       padding-top:clamp(74px,12vw,120px)}
}
@media (max-width:640px){
  .ark{padding-left:18px;padding-right:18px;width:94vw}
  /* pasek kontrolny wraca na lewą stronę — po prawej siedzi przycisk menu */
  .ark__kontrolka{right:auto;left:18px}
  .ark__metryka{padding-right:56px}
  .haslo{max-width:none}
  .spec__poz{grid-template-columns:1fr}
  .proces li{grid-template-columns:44px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .js-ark [data-ark]{opacity:1;transform:none;transition:none}
  .js-ark .ark__tytul i{display:none}
  .js-ark .kor svg path{stroke-dashoffset:0;transition:none}
  .js-ark .kor b{opacity:1;transform:none;transition:none}
  .stempel{transition:none}
}