/* DIY Poland - warstwa wizualna. Plik generowany przez build.py. */

:root{
  --krem:#f7f0e6;
  --papier:#fffaf3;
  --piasek:#eaddc8;
  --atrament:#241c17;
  --atrament-slaby:#5b4f45;
  --glina:#b5502e;
  --glina-ciemna:#8d3c21;
  --oliwka:#5c6a4a;
  --linia:#dcc9ae;

  --niebo-g:#e9d9be;
  --niebo-d:#f3e8d7;
  --slonce:#e8b96a;
  --maszt:#6f5f52;
  --plotno-1:#b5502e;
  --plotno-2:#5c6a4a;
  --plotno-3:#cf8a5a;

  --szer:1180px;
  --szer-waska:760px;
  --promien:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--krem);
  color:var(--atrament);
  font-family:Karla,"Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.72;
  overflow-wrap:anywhere;
}
img,svg{max-width:100%}

.obszar{width:100%;max-width:var(--szer);margin:0 auto;padding:0 24px}
.obszar.waski{max-width:var(--szer-waska)}

h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:1.16;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.5rem);margin:.1em 0 .5em}
h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2.6em 0 .7em}
h3{font-size:1.2rem;margin:2em 0 .4em}
p{margin:0 0 1.15em}
em{font-style:italic}

a{color:var(--glina-ciemna);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--glina)}
a:focus-visible,button:focus-visible,label:focus-visible{
  outline:3px solid var(--glina);outline-offset:3px;border-radius:4px}

.pomin{position:absolute;left:8px;top:8px;background:var(--atrament);color:#fff;
  padding:12px 20px;z-index:99;transform:translateY(-220%);transition:transform .15s ease}
.pomin:focus{transform:translateY(0)}

.etykieta{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oliwka);font-weight:700;margin:0 0 .8em}

/* ---------------------------------------------------------------- belka */

.belka{background:var(--papier);position:relative;border-bottom:1px solid var(--linia)}
.belka-srodek{display:flex;align-items:center;gap:20px;min-height:82px;flex-wrap:wrap}
.marka{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--atrament);
  margin-right:auto;padding:6px 0}
.znak{width:30px;height:30px;color:var(--glina);flex:none}
.marka-tekst{display:flex;flex-direction:column;line-height:1.15}
.marka-tekst strong{font-family:"Playfair Display",Georgia,serif;font-size:1.28rem;letter-spacing:-.01em}
.marka-tekst span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--oliwka)}

.przelacznik{display:none}
.przycisk-menu{display:none}

.dzialy{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.dzial{position:relative}
.dzial-tytul{
  font:inherit;font-weight:500;background:none;border:0;cursor:pointer;
  color:var(--atrament);padding:10px 14px;border-radius:999px;
  transition:background-color .2s ease,color .2s ease}
.dzial-tytul:hover{background:var(--piasek)}
.dzial-tytul.jest-aktywny{color:var(--glina-ciemna);font-weight:700}
.panel{
  position:absolute;top:100%;left:0;min-width:290px;max-width:calc(100vw - 36px);
  background:var(--papier);
  border:1px solid var(--linia);border-radius:var(--promien);padding:18px;
  box-shadow:0 18px 40px rgba(60,40,25,.13);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:40}
.dzial:hover .panel,.dzial:focus-within .panel{opacity:1;visibility:visible;transform:translateY(0)}
.dzial:last-child .panel,.dzial:nth-last-child(2) .panel{left:auto;right:0}
.panel-opis{font-size:.85rem;color:var(--atrament-slaby);margin:0 0 .8em;
  padding-bottom:.8em;border-bottom:1px solid var(--linia)}
.panel ul{list-style:none;margin:0;padding:0}
.panel li a{display:block;padding:7px 10px;border-radius:8px;text-decoration:none;
  color:var(--atrament);font-size:.95rem}
.panel li a:hover{background:var(--piasek);color:var(--glina-ciemna)}
.panel li a[aria-current="page"]{color:var(--glina-ciemna);font-weight:700}

.fala{height:10px;background:
  radial-gradient(circle at 10px -6px,transparent 12px,var(--papier) 12px) repeat-x 0 0/24px 12px;
  margin-bottom:-1px}

/* ---------------------------------------------------------------- luk */

.luk{margin:0}
.luk svg{display:block;width:100%;height:auto;border-radius:0}

/* ---------------------------------------------------------------- hero */

.hero{padding:56px 0 0}
.hero-siatka{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end}
.hero-tekst h1{margin-top:.1em}
.hero-tekst em{color:var(--glina-ciemna)}
.wprowadzenie{font-size:1.12rem;color:var(--atrament-slaby);max-width:56ch}

.przyciski{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.6em}
.pigulka{
  display:inline-block;padding:13px 26px;border-radius:999px;text-decoration:none;
  border:1px solid var(--atrament);color:var(--atrament);font-weight:500;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.pigulka:hover{background:var(--atrament);color:var(--krem)}
.pigulka.glowna{background:var(--glina);border-color:var(--glina);color:#fff}
.pigulka.glowna:hover{background:var(--glina-ciemna);border-color:var(--glina-ciemna);color:#fff}

.pasek-faktow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  background:var(--papier);border:1px solid var(--linia);border-radius:var(--promien);
  padding:26px 8px;margin-top:-44px;position:relative;z-index:5;
  box-shadow:0 20px 44px rgba(70,48,30,.09)}
.pasek-faktow>div{padding:0 20px;text-align:center;border-right:1px solid var(--linia)}
.pasek-faktow>div:last-child{border-right:0}
.fakt-liczba{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.7rem;
  color:var(--glina-ciemna);line-height:1.2}
.fakt-opis{display:block;font-size:.82rem;color:var(--atrament-slaby);line-height:1.5;margin-top:.3em}

/* ---------------------------------------------------------------- artykul */

.okruszki{font-size:.82rem;color:var(--atrament-slaby);padding:26px 0 6px}
.okruszki a{color:var(--atrament-slaby)}
.okruszki span[aria-hidden]{margin:0 8px;color:var(--linia)}

.naglowek{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end;
  padding-bottom:8px}
.naglowek-tekst{padding-bottom:36px}

.artykul h2{position:relative}
.numer{
  display:block;font-family:Karla,sans-serif;font-size:.72rem;letter-spacing:.2em;
  font-weight:700;color:var(--glina);text-transform:uppercase;margin-bottom:.7em}

.wstep,.artykul .waski{padding-bottom:8px}

.lista{list-style:none;margin:1.4em 0;padding:0}
.lista li{position:relative;padding-left:26px;margin-bottom:.6em}
.lista li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;
  background:var(--glina);transform:rotate(45deg)}

ol{padding-left:22px}
ol li{margin-bottom:.5em}

.dane{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.94rem;
  background:var(--papier);border:1px solid var(--linia);border-radius:var(--promien);
  overflow:hidden}
.dane th,.dane td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--linia)}
.dane thead th{background:var(--piasek);font-family:Karla,sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--atrament)}
.dane tbody tr:last-child td{border-bottom:0}
.tabela-przewijana{overflow-x:auto}

.wyimek{
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:1.3rem;
  line-height:1.45;color:var(--atrament);border-left:3px solid var(--glina);
  padding:.2em 0 .2em 24px;margin:2em 0}

.faq{margin-top:3em;border-top:1px solid var(--linia);padding-top:1em}
.pytanie{background:var(--papier);border:1px solid var(--linia);border-radius:var(--promien);
  padding:20px 24px;margin-bottom:12px}
.pytanie h3{margin:0 0 .3em;font-size:1.06rem}
.pytanie p{margin:0;color:var(--atrament-slaby);font-size:.96rem}

.dalej{margin:4em 0 5em}
.dalej h2{font-size:1.35rem;margin-bottom:1em}
.karty{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.karta{
  display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--atrament);
  background:var(--papier);border:1px solid var(--linia);
  border-radius:var(--promien) var(--promien) var(--promien) var(--promien);
  padding:22px 24px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.karta:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(70,48,30,.11);
  border-color:var(--glina)}
.karta-dzial{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--oliwka);
  font-weight:700}
.karta-tytul{font-family:"Playfair Display",Georgia,serif;font-size:1.16rem;line-height:1.3}

/* ---------------------------------------------------------------- spis */

.wstep{padding:36px 0 0}
.spis{padding:40px 0 20px}
.spis-naglowek{max-width:var(--szer-waska);margin-bottom:2em}
.spis-naglowek h2{margin-top:0}

.grupa{border-top:1px solid var(--linia);padding:34px 0;display:grid;
  grid-template-columns:.8fr 1.2fr;gap:44px}
.grupa-naglowek h2{margin:0 0 .4em;font-size:1.55rem}
.grupa-opis{color:var(--atrament-slaby);font-size:.95rem;margin:0}
.pozycje{list-style:none;margin:0;padding:0}
.pozycje li{border-bottom:1px solid var(--linia)}
.pozycje li:last-child{border-bottom:0}
.pozycje a{display:block;padding:16px 0;text-decoration:none;color:var(--atrament)}
.pozycje a:hover .poz-tytul{color:var(--glina-ciemna)}
.poz-tytul{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.18rem;
  line-height:1.3;transition:color .2s ease}
.poz-opis{display:block;font-size:.88rem;color:var(--atrament-slaby);margin-top:.25em}

/* ---------------------------------------------------------------- stopka */

.stopka{background:var(--atrament);color:#e8ddd0;margin-top:60px;padding:56px 0 30px}
.stopka a{color:#e8ddd0;text-decoration:none}
.stopka a:hover{color:#fff;text-decoration:underline}
.stopka .znak{color:var(--plotno-3)}
.stopka-siatka{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:32px}
.stopka-nazwa{font-family:"Playfair Display",Georgia,serif;font-size:1.3rem;margin:.5em 0 .3em;
  color:#fff}
.stopka-opis{font-size:.88rem;color:#b9a998;margin:0}
.stopka-kolumna h2{font-family:Karla,sans-serif;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--plotno-3);margin:0 0 1em}
.stopka-kolumna ul{list-style:none;margin:0;padding:0}
.stopka-kolumna li{margin-bottom:.5em;font-size:.9rem}
.zastrzezenie{margin:44px 0 0;padding-top:22px;border-top:1px solid #3b302a;
  font-size:.82rem;color:#a1907e;max-width:78ch}
.prawa{font-size:.82rem;color:#7d6d5f;margin:.8em 0 0}

/* ---------------------------------------------------------------- ekrany */

@media (max-width:1000px){
  .hero-siatka,.naglowek{grid-template-columns:1fr;gap:32px}
  .naglowek-tekst{padding-bottom:0}
  .luk{max-width:420px}
  .grupa{grid-template-columns:1fr;gap:12px}
  .stopka-siatka{grid-template-columns:1fr 1fr}
  .pasek-faktow{grid-template-columns:1fr 1fr;gap:20px 0;margin-top:26px}
  .pasek-faktow>div:nth-child(2n){border-right:0}
}

@media (max-width:900px){
  .przelacznik{display:block;position:absolute;opacity:0;width:1px;height:1px}
  .przycisk-menu{
    display:inline-block;cursor:pointer;padding:10px 20px;border-radius:999px;
    border:1px solid var(--atrament);font-weight:500;font-size:.92rem}
  .przycisk-menu:hover{background:var(--piasek)}
  .nawigacja{display:none;width:100%;padding-bottom:18px}
  .przelacznik:checked ~ .nawigacja{display:block}
  .przelacznik:focus-visible ~ .przycisk-menu{outline:3px solid var(--glina);outline-offset:3px}
  .dzialy{flex-direction:column;gap:0;width:100%}
  .dzial-tytul{width:100%;text-align:left;padding:12px 0;border-bottom:1px solid var(--linia);
    border-radius:0}
  .dzial-tytul:hover{background:none;color:var(--glina-ciemna)}
  .panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-bottom:1px solid var(--linia);border-radius:0;padding:10px 0 16px;
    max-width:none}
  .panel li a{padding:12px 10px}
  .dzial-tytul{min-height:48px}
  .karty{grid-template-columns:1fr}
}

@media (max-width:620px){
  body{font-size:16px}
  .obszar{padding:0 18px}
  .pasek-faktow{grid-template-columns:1fr}
  .pasek-faktow>div{border-right:0;border-bottom:1px solid var(--linia);padding-bottom:16px}
  .pasek-faktow>div:last-child{border-bottom:0;padding-bottom:0}
  .stopka-siatka{grid-template-columns:1fr}
  .dane{display:block;overflow-x:auto;white-space:nowrap}
  .wyimek{font-size:1.15rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}