@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#FFFFFF;
  --ground:#EFF1F2;
  --ink:#1A2228;
  --slate:#55646E;
  --line:#DDE3E5;
  --line-soft:#E8ECED;
  --sans:"Archivo","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --display:"Outfit","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
.wrap{max-width:820px;margin:0 auto;padding-left:24px;padding-right:24px;width:100%}

.masthead{padding-top:28px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.masthead a{display:inline-block}
.masthead img{display:block;width:230px;max-width:60%;height:auto;margin-block:-20px}

main{flex:1 0 auto;padding-top:40px;padding-bottom:64px}
main h1{
  margin:0 0 6px;font-family:var(--display);font-weight:600;
  font-size:clamp(1.65rem,3.4vw,2.2rem);line-height:1.15;letter-spacing:-.022em;text-wrap:balance;
}
.updated{margin:0 0 34px;color:var(--slate);font-size:.9375rem}
main h2{
  margin:38px 0 10px;font-family:var(--display);font-weight:600;
  font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.25;letter-spacing:-.015em;
}
main h3{margin:24px 0 8px;font-family:var(--display);font-weight:600;font-size:1.0125rem}
main p,main li{color:#37444D;text-wrap:pretty}
main p{margin:0 0 14px}
main ul,main ol{margin:0 0 16px;padding-left:22px}
main li{margin-bottom:7px}
main a{color:var(--ink);text-underline-offset:3px}
main a:hover{text-decoration-thickness:2px}

.lead{font-size:1.0625rem;color:var(--slate)}
.note{
  margin:0 0 28px;padding:16px 18px;
  background:var(--ground);border:1px solid var(--line);border-radius:8px;
  font-size:.9375rem;color:#37444D;
}
.note p:last-child{margin-bottom:0}

/* dane, których nie znamy — celowo rzucają się w oczy, żeby nie trafiły na produkcję */
.todo{
  background:#FFF0B3;
  box-shadow:0 0 0 1px #D9A300 inset;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  border-radius:3px;
  padding:1px 5px;
  font-weight:600;
  color:#4A3600;
  overflow-wrap:break-word;
}

table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:.9375rem}
th,td{text-align:left;vertical-align:top;padding:11px 12px;border-bottom:1px solid var(--line)}
th{font-weight:600;background:var(--ground)}
.tablewrap{overflow-x:auto;margin-bottom:20px}
.tablewrap table{margin-bottom:0;min-width:520px}

.btn{
  display:inline-block;min-height:44px;padding:11px 18px;
  border:1px solid var(--ink);border-radius:7px;
  background:var(--ink);color:var(--paper);
  font:inherit;font-weight:600;font-size:.9375rem;line-height:1.3;
  text-decoration:none;cursor:pointer;
}
.btn:hover{opacity:.88}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.backlink{display:inline-block;margin-top:40px;font-size:.9375rem;font-weight:600}

footer{background:#000;color:#9AA6AE}
/* szerszy niż kolumna tekstu (820px), żeby copyright i linki mieściły się w jednej linii */
footer .wrap{max-width:1240px;padding-top:30px;padding-bottom:34px;display:flex;flex-direction:column;gap:18px;font-size:.9375rem}
footer p{margin:0;color:#7C888F;font-size:.875rem}
footer nav{display:flex;gap:8px 26px;flex-wrap:wrap}
footer a{color:#F2F5F6;text-decoration:none;text-underline-offset:3px}
footer a:hover,footer a:focus-visible{text-decoration:underline}
footer a:focus-visible{outline:2px solid #F2F5F6;outline-offset:4px;border-radius:2px}
footer .foot-bottom{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px 28px;flex-wrap:wrap}
footer .foot-legal{gap:8px 22px}
footer .foot-legal a{color:#9AA6AE;font-size:.875rem}

@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding-left:20px;padding-right:20px}
  main{padding-top:30px;padding-bottom:48px}
}
@media (pointer:coarse){
  footer a{display:inline-block;padding-block:7px}
}