/* Sucharek — style artykułów (czytelnia) */
body { font-size: 16.5px; line-height: 1.65; }
.wrap { max-width: 760px; }

.crumbs-nav { font-size: 13.5px; color: var(--muted); margin: 8px 0 26px; }
.crumbs-nav a { text-decoration: none; }

.kicker { font-family: 'Caveat', cursive; font-size: 22px; color: var(--choc); transform: rotate(-.6deg); display: inline-block; margin: 0 0 4px; }
h1 { font-size: clamp(30px, 5.4vw, 44px); margin: 0 0 10px; transform: rotate(-.5deg); }
/* fala nie klei się do tekstu — rysuje się równo POD całym tytułem, jak w logo */
h1 .squig { background: none; padding: 0; }
h1::after { content: ''; display: block; width: min(280px, 70%); height: 13px; margin-top: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='13' viewBox='0 0 56 13'%3E%3Cpath d='M0 6.5 Q14 1 28 6.5 T56 6.5' fill='none' stroke='%23aacc2a' stroke-width='4.5'/%3E%3C/svg%3E") repeat-x left center;
  background-size: 56px 13px; }
.intro { font-size: 18px; color: var(--muted); }
.intro b { color: var(--ink); }

article h2 { font-size: 24px; margin: 42px 0 10px; transform: rotate(-.7deg); }
article h2:nth-of-type(even) { transform: rotate(.6deg); }
article h2::before { content: ''; display: inline-block; width: 14px; height: 13px; background: var(--cookie);
  border: 2px solid var(--ink); border-radius: 40% 60% 55% 45%; margin-right: 10px; transform: rotate(12deg); }
article ul, article ol { padding-left: 22px; }
article li { margin-bottom: 8px; }
article li::marker { color: var(--lime-strong); font-weight: 700; }

.box { background: var(--surface); border: 3px solid var(--ink); border-radius: 24px 18px 22px 20px;
  padding: 18px 22px; margin: 22px 0; }
.box.fakt { box-shadow: 5px 6px 0 var(--lime); transform: rotate(-.5deg); }
.box.uwaga { box-shadow: 5px 6px 0 var(--yellow); transform: rotate(.5deg); }
.box.kara { box-shadow: 5px 6px 0 var(--danger); transform: rotate(-.4deg); }
.box .tag { display: inline-block; background: var(--ink); color: var(--surface); font-family: 'Baloo 2', sans-serif;
  font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 2px 12px; margin-bottom: 8px; transform: rotate(-2deg); }
.box.kara .tag { background: var(--danger); }
.box p { margin: 0; }

.suchar-note { font-family: 'Caveat', cursive; font-size: 21px; color: var(--choc); transform: rotate(-1deg); display: block; margin: 26px 0; }

.zrodla { background: var(--surface); border: 2.5px dashed var(--pore); border-radius: 20px; padding: 20px 24px; margin-top: 46px; }
.zrodla h2 { margin-top: 0; font-size: 20px; }
.zrodla ol { margin: 0; padding-left: 20px; font-size: 14px; }
.zrodla li { margin-bottom: 6px; overflow-wrap: break-word; }

.cta-blok { background: var(--ink); color: #fff7ea; border-radius: 26px 20px 24px 22px; padding: 30px 28px;
  text-align: center; margin: 46px 0 10px; transform: rotate(-.5deg); box-shadow: 7px 8px 0 var(--cookie); }
.cta-blok h2 { color: #fff7ea; margin: 0 0 8px; font-size: 22px; }
.cta-blok h2::before { display: none; }
.cta-blok p { color: #d8c9b5; margin: 0 0 18px; font-size: 15px; }

.disclaimer { font-size: 12.5px; color: var(--muted); margin: 26px 0 40px; }

/* słowniczek */
.slownik { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 26px; }
.haslo-card { background: var(--surface); border: 2.5px solid var(--ink); border-radius: 22px 16px 20px 18px; padding: 18px 20px; }
.haslo-card:nth-child(4n+1) { transform: rotate(-1.1deg); box-shadow: 4px 5px 0 var(--cookie); }
.haslo-card:nth-child(4n+2) { transform: rotate(.9deg); box-shadow: 4px 5px 0 var(--lime); }
.haslo-card:nth-child(4n+3) { transform: rotate(-.7deg); box-shadow: 4px 5px 0 var(--yellow); }
.haslo-card:nth-child(4n+4) { transform: rotate(1deg); box-shadow: 4px 5px 0 var(--choc); }
.haslo-card h3 { margin: 0 0 6px; font-size: 17px; }
.haslo-card p { margin: 0; font-size: 14px; color: var(--muted); }
.haslo-card p b { color: var(--ink); }

/* poradnik 10 zdań */
.zdania { counter-reset: zdanie; list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 14px; }
.zdania li { counter-increment: zdanie; background: var(--surface); border: 2.5px solid var(--ink);
  border-radius: 20px 16px 18px 22px; padding: 16px 20px 16px 60px; position: relative; font-size: 15.5px; }
.zdania li:nth-child(odd) { transform: rotate(-.7deg); box-shadow: 4px 5px 0 var(--lime); }
.zdania li:nth-child(even) { transform: rotate(.6deg); box-shadow: 4px 5px 0 var(--cookie); }
.zdania li::before { content: counter(zdanie); position: absolute; left: 14px; top: 14px; width: 32px; height: 30px;
  background: var(--cookie-light); border: 2.5px solid var(--ink); border-radius: 46% 46% 24% 24% / 52% 52% 18% 18%;
  display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2', sans-serif;
  font-weight: 800; font-size: 15px; transform: rotate(-8deg); }

@media (max-width: 600px) { body { font-size: 15.5px; } }