/* ==========================================================================
   Atelier Forma - tokeny i nadpisania (demo, siteverse.pl/demo/forma/)
   Kierunek: "arkusz rysunku wykonawczego". Grafit i wapno, dab jako jedyny
   akcent, Instrument Serif, Inter, IBM Plex Mono. Wlos linii, siatka
   modularna, ramka arkusza ze znacznikami ciecia, metryczka, linie
   wymiarowe zamiast podpisow. Komponent podpisowy: OKNO WYCIETE W ARKUSZU
   (js/podpis.js): fotografia jest otworem w rysunku, nigdy nie lezy na nim.
   Wylacznie tokeny i nadpisania; limit 250 linii.
   ========================================================================== */

:root {
  --tlo:    #14161A;
  --tlo-2:  #1B1E24;
  --tlo-3:  #22262D;
  --tekst:   #EDE9E2;
  --tekst-2: rgba(237, 233, 226, 0.72);
  --tekst-3: #8C877D;
  --akcent:  #B08A5A;
  --akcent-tekst: #14161A;
  --wlos:   rgba(237, 233, 226, 0.16);
  --wlos-2: rgba(237, 233, 226, 0.08);

  --tlo-jasne:         #EDE9E2;
  --tlo-jasne-2:       #E3DED4;
  --tekst-na-jasnym:   #14161A;
  --tekst-2-na-jasnym: rgba(20, 22, 26, 0.68);
  --tekst-3-na-jasnym: #6F6A60;
  --wlos-na-jasnym:    rgba(20, 22, 26, 0.2);
  --wlos-2-na-jasnym:  rgba(20, 22, 26, 0.1);

  --f-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", system-ui, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --waga-display: 400;
  --interlinia-display: 1.0;
  --tracking-display: -0.01em;
  --promien: 0px;

  --nawi-tlo: rgba(20, 22, 26, 0.82);
  --pole-tlo: rgba(237, 233, 226, 0.04);
  --tint:
    linear-gradient(180deg, rgba(20, 22, 26, 0.45) 0%, rgba(20, 22, 26, 0.1) 40%, rgba(20, 22, 26, 0.85) 100%),
    linear-gradient(90deg, rgba(20, 22, 26, 0.35) 0%, rgba(20, 22, 26, 0) 50%);
}

h1 em, h2 em, h3 em { font-style: italic; color: var(--akcent); font-weight: 400; }
.nadtytul { letter-spacing: 0.3em; }
.nadtytul::before { width: 46px; }
.nawi__marka { font-family: var(--f-display); text-transform: none; letter-spacing: 0.02em; font-size: 1.5rem; font-weight: 400; }
.nawi__marka i { font-style: italic; }
.przycisk { border-radius: 0; }
.liczba__v { font-style: italic; color: var(--akcent); }
.tabela td b { font-family: var(--f-display); font-weight: 400; font-size: var(--step-1); }
.pasmo--jasne .karta { border-color: var(--wlos); }

/* ---------- arkusz: siatka modularna, ramka, znaczniki ciecia, metryczka ---------- */
.siatka-tlo { background-image: linear-gradient(to right, var(--wlos-2) 1px, transparent 1px), linear-gradient(to bottom, var(--wlos-2) 1px, transparent 1px); background-size: 80px 80px; }
.arkusz { position: relative; border: 1px solid var(--wlos); padding: clamp(24px, 4vw, 56px); }
.ciecie { position: absolute; width: 18px; height: 18px; pointer-events: none; }
.ciecie::before, .ciecie::after { content: ""; position: absolute; background: var(--tekst); opacity: 0.38; }
.ciecie::before { width: 18px; height: 1px; top: 0; left: 0; }
.ciecie::after { width: 1px; height: 18px; top: 0; left: 0; }
.ciecie--tl { left: -1px; top: -1px; }
.ciecie--tr { right: -1px; top: -1px; transform: scaleX(-1); }
.ciecie--bl { left: -1px; bottom: -1px; transform: scaleY(-1); }
.ciecie--br { right: -1px; bottom: -1px; transform: scale(-1); }
.arkusz-nr { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.24em; color: var(--tekst-3); }
.arkusz-nr b { font-weight: 500; color: var(--akcent); }
.metryczka { display: flex; flex-wrap: wrap; border: 1px solid var(--wlos); }
.metryczka__pole { padding: 12px 22px 13px; border-left: 1px solid var(--wlos); min-width: 118px; flex: 1 1 auto; }
.metryczka__pole:first-child { border-left: 0; }
.metryczka__klucz { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tekst-3); display: block; margin-bottom: 7px; }
.metryczka__wartosc { font-family: var(--f-mono); font-size: 0.88rem; letter-spacing: 0.04em; line-height: 1; }
.metryczka__pole--akcent .metryczka__wartosc { color: var(--akcent); }
.arkusz__stopa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-top: clamp(28px, 4vw, 48px); }

/* ---------- jezyk rysunku: linie wymiarowe, odniesienia, rzut SVG ---------- */
.wymiar { display: flex; align-items: center; position: relative; height: 12px; }
.wymiar__linia { flex: 1; height: 1px; background: var(--akcent); opacity: 0.75; position: relative; transform-origin: left; }
.wymiar__linia::before, .wymiar__linia::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--akcent); }
.wymiar__linia::before { left: 0; }
.wymiar__linia::after { right: 0; }
.wymiar__odczyt { position: absolute; left: 50%; transform: translateX(-50%); top: -24px; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--akcent); white-space: nowrap; }
.wymiar--pion { width: 12px; height: auto; align-self: stretch; flex-direction: column; }
.wymiar--pion .wymiar__linia { width: 1px; height: 100%; flex: 1; transform-origin: top; }
.wymiar--pion .wymiar__linia::before, .wymiar--pion .wymiar__linia::after { left: -5px; top: auto; width: 11px; height: 1px; }
.wymiar--pion .wymiar__linia::before { top: 0; }
.wymiar--pion .wymiar__linia::after { bottom: 0; }
.wymiar--pion .wymiar__odczyt { left: 18px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: left center; }
.rys-linia { fill: none; stroke: var(--tekst); stroke-width: 1; opacity: 0.42; }
.rys-slaby { fill: none; stroke: var(--tekst); stroke-width: 1; opacity: 0.14; }
.rys-mocny { fill: none; stroke: var(--tekst); stroke-width: 1.6; opacity: 0.62; }
.rys-dab { fill: none; stroke: var(--akcent); stroke-width: 1; opacity: 0.8; }
.rys-plama { fill: var(--tekst); opacity: 0.05; }
.rys-tekst { font-family: var(--f-mono); font-size: 10px; fill: var(--tekst-3); letter-spacing: 0.1em; }
.rzut svg { width: 100%; height: auto; display: block; }

/* ---------- OKNO WYCIETE W ARKUSZU: komponent podpisowy (js/podpis.js) ----------
   Rzut po lewej, fotografia siedzi w obrysie pomieszczenia jako otwor,
   linie wymiarowe rysuja sie transformem, fotografia wchodzi opacity. */
.okno { position: relative; overflow: hidden; }
.okno img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: var(--okno-ar, 4 / 5); object-position: var(--foto-poz, 50% 50%); filter: saturate(1.04) contrast(1.03); }
.okno::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(237, 233, 226, 0.22); }
.pasmo--jasne .okno::after { border-color: rgba(20, 22, 26, 0.22); }
.wyciecie { display: grid; grid-template-columns: minmax(0, 1fr) 40px; grid-template-rows: auto 40px; gap: 6px 12px; position: relative; }
.wyciecie .okno { grid-column: 1; grid-row: 1; }
.wyciecie .wymiar--pion { grid-column: 2; grid-row: 1; }
.wyciecie .wymiar { grid-column: 1; grid-row: 2; align-self: start; margin-top: 18px; }
.wyciecie__etykieta { position: absolute; left: 0; top: -26px; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tekst-3); }
.wyciecie.jest-czeka .okno img { opacity: 0; }
.wyciecie .okno img { transition: opacity 0.9s var(--ease) 0.5s; }
.wyciecie.jest-czeka .wymiar__linia { transform: scaleX(0); }
.wyciecie.jest-czeka .wymiar--pion .wymiar__linia { transform: scaleY(0); }
.wyciecie .wymiar__linia { transition: transform 0.9s var(--ease) 0.15s; }
.wyciecie.jest-czeka .wymiar__odczyt { opacity: 0; }
.wyciecie .wymiar__odczyt { transition: opacity 0.5s var(--ease) 1s; }

.hero-fo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.hero-fo__tresc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.hero-fo__tresc .nadtytul > span { min-width: 0; }
.hero-fo__tresc .tytul--1 { font-size: clamp(2.8rem, 1.5rem + 5.6vw, 6rem); max-width: 14ch; }
@media (max-width: 900px) { .hero-fo { grid-template-columns: minmax(0, 1fr); } .hero-fo .wyciecie { max-width: 420px; } }

/* ---------- os procesu w skali rzeczywistej (js/podpis.js tryb "os") ---------- */
.os { position: relative; padding-left: 96px; --tydzien: 32px; }
.os__linia { position: absolute; left: 30px; top: 0; bottom: 0; width: 1px; background: var(--wlos); transform-origin: top; }
.os__kreska { position: absolute; left: 26px; width: 9px; height: 1px; background: var(--tekst); opacity: 0.3; }
.os__etap { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; }
.os__wezel { position: absolute; left: 26px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--akcent); }
.os__wynos { position: absolute; left: 35px; top: 12px; width: 48px; height: 1px; background: var(--akcent); opacity: 0.6; transform-origin: left; }
.os__nr { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.24em; color: var(--akcent); padding-left: 96px; padding-top: 4px; }
.os__nazwa { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.05; }
.os__opis { color: var(--tekst-2); font-size: var(--step--1); margin-top: 6px; max-width: 48ch; }
.os__czas { text-align: right; font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.04em; white-space: nowrap; padding-top: 4px; }
.os__czas span { display: block; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 6px; }
.os.jest-czeka .os__linia { transform: scaleY(0); }
.os .os__linia { transition: transform 1.4s var(--ease); }
.os.jest-czeka .os__etap { opacity: 0; }
.os .os__etap { transition: opacity 0.6s var(--ease) calc(var(--i, 0) * 260ms + 300ms); }
.os__suma { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--wlos); padding-top: 16px; margin-top: 24px; }
.os__suma span { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tekst-3); }
.os__suma b { font-family: var(--f-display); font-weight: 400; font-size: var(--step-2); }
.os__suma b i { color: var(--akcent); }
@media (max-width: 760px) { .os { padding-left: 0; } .os__etap { position: static !important; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0 18px 48px; border-top: 1px solid var(--wlos-2); } .os__nr { padding-left: 0; } .os__czas { text-align: left; } .os__wezel { top: 22px; left: 8px; } .os__wynos { display: none; } .os__linia { left: 12px; } .os__kreska { display: none; } .os__etap:first-child { border-top: 0; } }

/* ---------- paleta materialow (kadr 04) i zestawiacz ---------- */
.paleta { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.probka { display: grid; gap: 10px; align-content: start; position: relative; }
.probka__kafel { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--wlos); }
.probka__kafel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.probka__indeks { position: absolute; left: 10px; top: 8px; z-index: 2; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--tekst); background: rgba(20, 22, 26, 0.7); padding: 3px 7px; }
.probka__nazwa { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.1; }
.probka__nazwa i { color: var(--akcent); }
.probka__opis { color: var(--tekst-2); font-size: var(--step--1); max-width: none; }
.probka__zrodlo { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tekst-3); }
.probka--wiodacy { grid-column: span 2; }
.probka--wiodacy .probka__kafel { aspect-ratio: 2 / 1; }
@media (max-width: 1080px) { .paleta { grid-template-columns: repeat(3, minmax(0, 1fr)); } .probka--wiodacy { grid-column: span 3; } }
@media (max-width: 560px) { .paleta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .probka--wiodacy { grid-column: span 2; } }
.wybor--probki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wybor--probki .wybor__opcja { padding: 0 0 12px; gap: 8px; }
.wybor--probki .wybor__opcja input { top: 10px; right: 10px; z-index: 2; }
.wybor--probki .probka__kafel { border: 0; border-bottom: 1px solid var(--wlos-2); }
.wybor--probki .wybor__tytul { padding: 0 12px; font-size: var(--step-0); }
.wybor--probki .wybor__pod, .wybor--probki .wybor__opis { padding: 0 12px; }
.wybor--probki .wybor__opcja:has(input:checked) .probka__kafel { outline: 2px solid var(--akcent); outline-offset: -2px; }
@media (max-width: 560px) { .wybor--probki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brief__wybrane { display: flex; flex-wrap: wrap; gap: 6px; }
.brief__wybrane li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--wlos); padding: 5px 9px; }
.brief__wybrane img { width: 18px; height: 18px; object-fit: cover; }
.zap__podsumowanie .cena b { font-size: var(--step-3); font-style: italic; }
.skladowe li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--wlos-2); font-family: var(--f-mono); font-size: 0.72rem; color: var(--tekst-2); }
.skladowe li b { font-weight: 500; color: var(--tekst); white-space: nowrap; }
.odczyty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--odstep); }
.odczyt__klucz { display: block; font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 8px; }
.odczyt__wartosc { font-family: var(--f-display); font-size: var(--step-3); line-height: 1; }
.odczyt__wartosc i { color: var(--akcent); }
@media (max-width: 560px) { .odczyty { grid-template-columns: minmax(0, 1fr); } }