/* 404.tf — system „karta techniczna": papier kredowy, farba K-100, granat pomiarowy.
   Kierunek: design-research 31.08.2026 (qr-card/docs). Fonty self-host (zero zewnętrznych żądań). */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/BricolageGrotesque-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/BricolageGrotesque-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+2026;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+2026, U+2192;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+2026, U+2192;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+2026;
}

:root {
  --paper: #F7F2E0;
  --paper-2: #EFE8D2;
  --ink: #131313;
  --navy: #1F3A5F;          /* granat pomiarowy: para duotone 10,4:1, skanuje się jak czerń */
  --line: #C9C2B2;
  --line-soft: #DDD8CA;
  --ink-muted: #5C5A51;
  --disp: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* pasek języka + adres arkusza */
.topbar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: 14px 12px; border-bottom: 1px solid var(--line);  /* skrot `padding: 14px 0 12px` kasowal boczne wciecie .wrap i pasek byl szerszy niz arkusz (QC UX 01.09) */
  font: 500 12.5px/1 var(--mono); letter-spacing: .04em;
}
.topbar a { color: var(--ink); text-decoration: none; }
.topbar a:hover, .topbar a:focus-visible { color: var(--navy); text-decoration: underline; }
.topbar .lang a[aria-current="true"] { color: var(--navy); text-decoration: underline; }
.topbar .lang span { color: var(--line); padding: 0 2px; }
.topbar .right { display: flex; gap: 18px; align-items: baseline; }
.topbar .right > a { display: inline-block; padding: 8px 4px; margin: -8px 0; } /* NIE SPRZATAC: to samo pole dotyku co przelacznik jezyka — link stoi przy krawedzi ekranu (QC UX 02.09) */
.topbar .lang a { display: inline-block; padding: 8px 7px; margin: -8px 0; } /* NIE SPRZATAC: padding+ujemny margines = pole dotyku >=24px (WCAG 2.2 AA 2.5.8) bez podnoszenia paska */

/* etykieta sekcji: numer arkusza + tytuł wersalikami mono */
.sec { padding: 56px 0 48px; border-bottom: 1px solid var(--line); position: relative; }
main > .sec:first-of-type { padding-top: 84px; }
.sec-label {
  display: flex; gap: 14px; align-items: baseline;
  font: 500 12.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 26px;
}
.sec-label .no { color: var(--ink-muted); }
.sec-label::after { content: ''; flex: 1; border-bottom: 1px solid var(--line-soft); transform: translateY(-3px); }

h1, h2, h3 { font-family: var(--disp); font-weight: 500; margin: 0; }
h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1.02; letter-spacing: -.015em; }
h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.12; margin-bottom: 14px; }
h3 { font-size: 19px; }
p { margin: 0 0 1em; max-width: 50ch; } /* ~68 znakow w wierszu (62ch = 84, za dlugo — QC UX 01.09) */
a { color: var(--navy); }

/* hero */
/* hero: kopia | demo, CTA pod kopia; na telefonie kopia -> DEMO -> CTA (dowod przed prosba — QC UX 01.09) */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy demo" "cta demo"; gap: 0 48px; align-items: center; padding: 64px 0 56px; border-bottom: 1px solid var(--line); }
.hero-copy { grid-area: copy; align-self: end; }
.hero > .cta { grid-area: cta; align-self: start; }
.hero > .demo { grid-area: demo; align-self: center; }
.hero.hero--single { grid-template-columns: 1fr; grid-template-areas: none; border-bottom: 0; }
.hero.hero--single .hero-copy { grid-area: auto; align-self: auto; } /* bez tego grid-area:copy (nieistniejaca linia) tworzy niejawna kolumne i spycha kopie w prawo (bug 01.09, widoczny na 1280) */
.hero-copy .status {
  display: inline-block; font: 500 12.5px/1 var(--mono); letter-spacing: .08em;
  color: var(--navy); border: 1px solid var(--navy); padding: 7px 12px; margin-bottom: 22px;
}
.hero-copy .sub { font-size: 19px; max-width: 46ch; margin: 20px 0 26px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Zdanie pod przyciskami lamie wiersz i zajmuje cala szerokosc — mowi, co dziala DZIS. */
.cta .note { flex: 1 0 100%; margin: 4px 0 0; }
.btn {
  font: 500 15px/1 var(--mono); text-decoration: none; padding: 14px 20px;
  border: 1.5px solid var(--ink); color: var(--ink); background: transparent;
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.btn.primary:hover, .btn.primary:focus-visible { background: var(--ink); border-color: var(--ink); }

/* demo kodu z wymiarowaniem jak na rysunku */
.demo { text-align: center; }
.demo figure { margin: 0; }
.demo .code-plate { background: #fff; border: 1px solid var(--line); padding: 14px; display: inline-block; max-width: 100%; }
.demo img.qr { display: block; width: 276px; max-width: 100%; height: auto; image-rendering: pixelated; } /* NIE SKALOWAC: 276 px = 1 px CSS na sub-piksel kodu; inna szerokosc = aliasing (paski kropek co N rzedow), zgloszone przez Tomka 01.09 */
.demo .dim {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font: 400 12.5px/1 var(--mono); color: var(--ink-muted); margin-top: 10px;
}
.demo .dim::before, .demo .dim::after { content: ''; flex: 0 0 44px; border-top: 1px solid var(--ink); }
.demo figcaption { font: 400 13.5px/1.5 var(--mono); margin-top: 14px; }
.demo figcaption .addr { color: var(--navy); font-weight: 500; }

/* sekwencja metody: 4 klatki */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.steps figure { margin: 0; border: 1px solid var(--line); background: #fff; padding: 10px; }
.steps figure:last-child { border: 2px solid var(--navy); }
.steps img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.steps figcaption { font: 400 12.5px/1.5 var(--mono); padding-top: 9px; }
.steps figcaption b { font-weight: 500; color: var(--navy); }

/* tabela specyfikacji / pomiarów — język karty katalogowej */
table.spec { border-collapse: collapse; width: 100%; max-width: 680px; font-size: 15.5px; }
table.spec th, table.spec td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 0; } /* koniec tabeli = kreska sekcji, nie podwojna (QC UX 01.09) */
table.spec th { font: 500 12.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); width: 160px; font-weight: 500; }
table.spec td.v { font-family: var(--mono); font-size: 14.5px; }
.note { font: 400 13px/1.6 var(--mono); color: var(--ink-muted); max-width: 70ch; }

/* Zdjecie karty z drukarni: dowod, nie ozdoba. Stoi OBOK tabeli, bo odpowiada na to samo
   pytanie ("co dostane") tylko obrazem — tabela podaje liczby, zdjecie pokazuje przedmiot. */
.plate { display: grid; gap: 24px; margin-top: 10px; align-items: start; }
/* 940, nie 780: przy 820 px (iPad w pionie) kolumna wartosci tabeli spadala do ~116 px
   i 'iPhone · Android · ekran · papier' lamalo sie na trzy wiersze (QC 01.09). */
@media (min-width: 940px) { .plate { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; } }
.plate figure { margin: 0; border: 1px solid var(--line); background: #fff; padding: 10px; }
.plate img { display: block; width: 100%; height: auto; }
.plate figcaption { font: 400 12.5px/1.6 var(--mono); color: var(--ink); padding-top: 14px; }
.plate figcaption b { font-weight: 500; color: var(--ink); }
/* Kreska otwierajaca tabele lezy w jednej linii z gorna krawedzia plyty — inaczej blok
   otwiera sie po lewej, a po prawej niczym, i czyta sie jak dwa sasiadujace obiekty. */
.plate table.spec { max-width: none; border-top: 1.5px solid var(--ink); }
.plate table.spec tr:first-child th, .plate table.spec tr:first-child td { padding-top: 14px; }
.wprowadzenie { max-width: 452px; }   /* krawedz kolumny zdjecia = linia, nie sugestia */

/* FAQ jako rejestr pytań */
details { border-bottom: 1px solid var(--line-soft); }
details:last-child { border-bottom: 0; }
details summary {
  cursor: pointer; list-style: none; padding: 18px 0;
  font-family: var(--disp); font-size: 20px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; font: 500 18px/1 var(--mono); color: var(--navy); }
details[open] summary::after { content: '−'; }
details .a { padding: 0 0 18px; }
details .a p { margin-bottom: .7em; }

/* stopka = tabelka rysunkowa (title block) */
.titleblock { border: 1.5px solid var(--ink); margin: 56px 0 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.titleblock .cell { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 10px 14px; }
.titleblock .cell:nth-child(3n) { border-right: 0; }
.titleblock .cell:nth-last-child(-n+3) { border-bottom: 0; }
.titleblock .k { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); display: block; margin-bottom: 5px; }
.titleblock .w { font: 500 14px/1.35 var(--mono); overflow-wrap: anywhere; }
.titleblock .w a { color: var(--navy); text-decoration: none; }
.titleblock .w a:hover { text-decoration: underline; }
.at::before { content: "@"; } /* adres bez @ w HTML (anty-spam); m.js podmienia na pelny tekst */
footer .made { font-size: 15.5px; max-width: 50ch; }
footer { padding-bottom: 56px; }

/* znaczniki cięcia w narożnikach głównych sekcji (język drukarni) */
.cropmarks { position: relative; }
.cropmarks::before, .cropmarks::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.cropmarks::before, .cropmarks::after { width: 12px; height: 12px; border-color: var(--line); border-style: solid; }
.cropmarks::before { top: -1px; left: -18px; border-width: 1px 0 0 1px; }
.cropmarks::after  { bottom: -1px; right: -18px; border-width: 0 1px 1px 0; }
/* Pozostale dwa rogi — arkusz ma cztery znaki, nie dwa po przekatnej (spojnosc z OG, QC 01.09).
   Wieszamy je na numerze arkusza, bo ::after samej .sec-label rysuje linie ciagnaca sie w prawo. */
.cropmarks .sec-label .no::before, .cropmarks .sec-label .no::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: var(--line); border-style: solid; }
.cropmarks .sec-label .no::before { top: -1px; right: -18px; border-width: 1px 1px 0 0; }
.cropmarks .sec-label .no::after  { bottom: -1px; left: -18px; border-width: 0 0 1px 1px; }

/* hub — rejestr aplikacji: arkusz jak na stronie produktu (numer arkusza, znaki ciecia),
   wpis = najciezszy obiekt strony. Trzecia kolumna trzyma wyrob; wiersz bez wyrobu zostaje tekstowy. */
.apps-sec { padding: 26px 0 6px; }   /* dol domyka tabliczka stopki (margines 56) — bez tego 125 px niczego (QC UX 02.09) */
.apps { border-top: 1.5px solid var(--ink); }
.app-row {
  position: relative;   /* nosnik dla ::after naglowka — klikalny jest CALY wiersz, nie sam tytul (QC UX 02.09) */
  display: grid; grid-template-columns: 110px minmax(0, 1fr) 340px; gap: 20px 24px; align-items: start;
  padding: 26px 0; border-bottom: 1.5px solid var(--ink); color: var(--ink);
}
.app-row .meta { grid-column: 1; grid-row: 1 / span 2; }
.app-row .body { grid-column: 2; grid-row: 1; }
.app-row figure { grid-column: 3; grid-row: 1 / span 2; position: relative; z-index: 1; } /* nad overlayem naglowka: zdjecie zachowuje menu kontekstowe */
.app-row .go { grid-column: 2; grid-row: 2; }
.app-row h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.1; margin: -4px 0 0; }
.app-row h2 a { color: var(--ink); text-decoration: none; }
.app-row h2 a::after { content: ''; position: absolute; inset: 0; }   /* cala powierzchnia wiersza = cel */
.app-row h2 a:hover, .app-row h2 a:focus-visible { color: var(--navy); text-decoration: underline; }
.app-row .meta { display: flex; flex-direction: column; gap: 6px; align-self: start; }
.app-row .id { font: 500 13px/1.6 var(--mono); color: var(--navy); }
.app-row .st { font: 500 12.5px/1.5 var(--mono); letter-spacing: .06em; color: var(--ink-muted); }
.app-row p { margin: 8px 0 0; font-size: 15.5px; max-width: 52ch; }
.app-row .go { font: 500 14px/1.5 var(--mono); color: var(--navy); margin-top: 14px; }
.app-row:hover .go { text-decoration: underline; }
.app-row figure { margin: 0; border: 1px solid var(--line); background: #fff;
                  padding: 8px; width: 100%; max-width: 340px; justify-self: end; }
.app-row figure img { display: block; width: 100%; height: auto; }
.app-row figcaption { font: 400 12px/1.5 var(--mono); color: var(--ink); padding-top: 8px; }
.apps-note { font: 400 13px/1.6 var(--mono); color: var(--ink-muted); margin-top: 14px; }
.poza { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* domena w nazwie linku dla czytnika ekranu; wzrokowo niesie ja strzalka ↗ */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; grid-template-areas: "copy" "demo" "cta"; gap: 32px 0; padding: 44px 0 44px; }
  .hero .hero-copy .sub { margin-bottom: 0; }
  .demo { justify-self: stretch; } /* plakietka kodu rowna z krawedziami tekstu, kod 276 px wysrodkowany w niej (QC UX r2 01.09) */
  .demo .code-plate { display: block; }
  .demo img.qr { margin-inline: auto; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .app-row { grid-template-columns: 1fr; gap: 6px; } /* hub: na waskim ekranie wiersz w pion (360: srodkowa kolumna zwezala sie do 90 px — QC 01.09) */
  .app-row .meta, .app-row .body, .app-row figure, .app-row .go { grid-column: 1; grid-row: auto; } /* kolejnosc z DOM: dowod PRZED prosba, jak na /qr (QC 02.09) */
  .app-row .meta { flex-direction: row; gap: 12px; align-items: baseline; }
  .app-row figure { max-width: 100%; margin-top: 14px; justify-self: stretch; }
  .app-row .go { margin-top: 16px; }
  .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titleblock .cell:nth-child(3n) { border-right: 1px solid var(--ink); }
  .titleblock .cell:nth-child(2n) { border-right: 0; }
  .titleblock .cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--ink); }
  .titleblock .cell:nth-last-child(-n+2) { border-bottom: 0; }
  .titleblock .cell:nth-child(3):last-child { grid-column: 1 / -1; border-right: 0; } /* 3 komorki w 2 kolumnach: ostatnia na cala szerokosc, bez sieroty i bez lamania e-maila */
  .titleblock .cell:nth-child(2):nth-last-child(2) { border-bottom: 1px solid var(--ink); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 400px) { .demo .code-plate { padding: 10px; } } /* 360 px: 316 - 20 >= 276, kod nie skaluje sie w dol */

@media (max-width: 480px) {
  table.spec, table.spec tbody, table.spec tr, table.spec th, table.spec td { display: block; width: 100%; }
  table.spec th { padding: 10px 0 2px; border-bottom: 0; }
  table.spec td { padding: 0 0 10px; }
}