/* Naklejki.biz — "die-cut": materialność naklejki z samego CSS.
   Display: condensed heavy z systemowego stosu (Avenir Next Condensed / Bahnschrift Condensed / Arial Narrow / Roboto Condensed).
   Paleta: grafit + żółć + róż. Jasny i ciemny motyw przez prefers-color-scheme. */
:root{
  color-scheme:light dark;
  --bg:#f3efe6;--sheet:#fbf9f3;--paper:#fff;--ink:#17181c;--muted:#43464d;--line:#7a7466;
  --y:#ffd21f;--p:#ff5a85;--pd:#c8184f;--gr:#2a2c32;--sink:#17181c;--die:#fff;
  --liner:#101114;--shade:rgba(48,36,12,.3);--dot:rgba(23,24,28,.09);
  --disp:"Avenir Next Condensed","Bahnschrift Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#16171b;--sheet:#1d1f24;--paper:#f4f1e8;--ink:#f4f1e8;--muted:#c4c0b4;--line:#7c7a71;--pd:#ff7ea0;--liner:#0c0d0f;--shade:rgba(0,0,0,.6);--dot:rgba(255,255,255,.07)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--p) var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.7 var(--body)}
::selection{background:var(--y);color:var(--sink)}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--p);text-decoration-thickness:3px;text-underline-offset:.2em}
a:hover{background:var(--y);color:var(--sink);text-decoration-color:var(--sink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:72rem;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:0;background:var(--y);color:var(--sink);font-weight:700;padding:.6rem 1rem;z-index:20}
.skip:focus{left:8px;top:8px}

/* nagłówek: logo jako naklejka, menu jako żółty przycisk-naklejka */
.top{border-bottom:2px dashed var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px;position:relative}
.logo{display:block;line-height:0;background:#fff;padding:8px 14px;border-radius:14px;transform:rotate(-1.5deg);filter:drop-shadow(0 3px 4px var(--shade));box-shadow:0 0 0 3px #fff}
.logo:hover{background:#fff}
.logo img{display:block;height:36px;width:auto}
.menu summary{white-space:nowrap;list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;font:800 1.15rem/1 var(--disp);letter-spacing:.01em;padding:.7rem 1.1rem;border-radius:14px;background:var(--y);color:var(--sink);box-shadow:0 0 0 3px #fff;filter:drop-shadow(0 3px 4px var(--shade));transform:rotate(1deg);user-select:none;transition:transform .3s var(--ease)}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:.5rem;height:.5rem;border:solid currentColor;border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.menu summary:hover{transform:rotate(-1deg) translateY(-2px)}
.menu[open] summary{background:var(--p)}
.menu[open] summary::after{transform:translateY(2px) rotate(225deg)}
.menu nav{position:absolute;right:16px;top:calc(100% + 10px);left:16px;max-width:36rem;margin-left:auto;background:var(--sheet);border:2px dashed var(--line);border-radius:22px;padding:12px;filter:drop-shadow(0 12px 18px var(--shade));z-index:10}
.menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.menu li a{display:block;padding:.5rem .8rem;color:var(--ink);text-decoration:none;border-radius:10px;font-weight:600;font-size:.97rem}
.menu li a:hover{background:var(--y);color:var(--sink)}
.menu li a[aria-current]{background:var(--p);color:var(--sink);font-weight:800}

/* typografia */
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.02;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(3rem,8vw,5.2rem);line-height:.95;margin:.4rem 0 1.4rem}
h2{font-size:clamp(1.7rem,3.4vw,2.1rem);margin:3rem 0 .8rem}
h3{font-size:1.55rem;letter-spacing:0;margin:2rem 0 .5rem}
.prose{max-width:40rem}
.prose p{margin:0 0 1.1rem;text-wrap:pretty}
.prose h1::after{content:"";display:block;width:min(100%,13rem);margin-top:.55em;border-top:4px dashed var(--p)}
.prose h2::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.4em;background:var(--p);clip-path:polygon(0 0,100% 0,100% 52%,52% 100%,0 100%);vertical-align:.04em}
.prose ul,.prose ol{list-style:none;padding:0;margin:0 0 1.4rem}
.prose li{position:relative;padding-left:2.3rem;margin-bottom:.7rem}
.prose li::marker{content:""}
.prose ul li::before{content:"";position:absolute;left:.25rem;top:.5em;width:.8rem;height:.8rem;border-radius:50%;background:var(--y);box-shadow:0 0 0 3px var(--die),0 2px 4px var(--shade)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n;padding-left:3rem;min-height:2.2rem}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:-.05rem;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--y);color:var(--sink);font:800 1.2rem/2.1rem var(--disp);text-align:center;box-shadow:0 0 0 3px var(--die),0 3px 6px var(--shade)}
.crumbs ol{list-style:none;margin:0 0 .6rem;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.9rem;color:var(--muted)}
.crumbs li+li::before{content:"\203A";margin-right:6px}
.crumbs a{color:var(--muted)}

main{padding-top:clamp(26px,4vw,48px);padding-bottom:40px}
/* podstrona: artykuł + marginesowa kolumna "Zobacz też" */
.page{display:grid;grid-template-columns:minmax(0,40rem) minmax(15rem,19rem);justify-content:space-between;column-gap:3rem;align-items:start}
.page>.crumbs{grid-column:1/-1}
.page>.prose{grid-column:1}
.page>.related{grid-column:2;grid-row:2;position:sticky;top:1.2rem;margin-top:.6rem}
.related h2{margin:0 0 1.1rem;font-size:1.7rem}
.related h2::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.4em;background:var(--y);clip-path:polygon(0 0,100% 0,100% 52%,52% 100%,0 100%);vertical-align:.04em}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}

/* naklejka: biały kontur (::before), kolor (::after), treść (a) */
.tiles,.related ul{--c:30px}
:where(.tiles li,.related li){--r:0deg;--rad:22px;--fill:var(--paper);--tx:var(--sink);--clip:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.tiles li,.related li{position:relative;filter:drop-shadow(0 7px 7px var(--shade));transform:rotate(var(--r));transition:transform .5s var(--ease)}
.tiles li::before,.tiles li::after,.related li::before,.related li::after{content:"";position:absolute;border-radius:var(--rad);clip-path:var(--clip)}
.tiles li::before,.related li::before{inset:0;background:var(--die)}
.tiles li::after,.related li::after{inset:6px;background:var(--fill);transition:background-color .25s}
.tiles a,.related a{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;height:100%;padding:1.4rem 1.6rem 1.6rem;color:var(--tx);text-decoration:none;border-radius:var(--rad)}
.tiles a:hover,.related a:hover{background:none;color:var(--tx)}
.tiles strong,.related strong{display:block;font:800 2rem/1 var(--disp);letter-spacing:-.005em;margin-bottom:.45rem;text-wrap:balance}
.tiles span,.related span{display:block;font-size:1.02rem;line-height:1.4}
.k-rect a::after{content:"";position:absolute;right:0;bottom:0;width:var(--c);height:var(--c);background:linear-gradient(135deg,#fff 40%,#cdc6b2);clip-path:polygon(0 0,100% 0,0 100%)}
.tiles li:hover,.tiles li:focus-within,.related li:hover,.related li:focus-within{transform:rotate(calc(var(--r)*-1.7 - .6deg)) translateY(-5px) scale(1.025)}
.tiles li:hover strong,.related li:hover strong{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.12em}
.tiles a:focus-visible,.related a:focus-visible{outline-offset:6px;border-radius:var(--rad)}
.related li:nth-child(odd){--r:-1deg}.related li:nth-child(even){--r:.9deg}
.related li:hover::after,.related li:focus-within::after{background-color:var(--y)}
.related a{padding:1rem 1.4rem 1.2rem}
.related strong{font-size:1.5rem}
.tiles li:nth-child(3n+1){--r:-1.3deg}.tiles li:nth-child(3n+2){--r:.9deg}.tiles li:nth-child(3n){--r:-.4deg}
/* kształty */
.k-circle{--rad:50%;--clip:none;aspect-ratio:1}
.k-circle a,.k-burst a,.k-oct a{align-items:center;text-align:center;padding:14%}
.k-circle::after{background:radial-gradient(circle at 26% 20%,rgba(255,255,255,.5),transparent 36%),var(--fill)!important}
.k-cap{--rad:999px;--clip:none}
.k-cap a{padding:1.3rem 3.2rem}
.k-leaf{--rad:4.2rem .8rem 4.2rem .8rem;--clip:none}
.k-leaf a{padding:1.8rem 2.4rem}
.k-oct{--rad:0;--clip:polygon(26% 0,74% 0,100% 26%,100% 74%,74% 100%,26% 100%,0 74%,0 26%);aspect-ratio:1}
.k-burst{--rad:0;--clip:polygon(50.0% 0.0%,59.6% 8.1%,71.7% 5.0%,76.8% 16.4%,89.1% 18.8%,88.7% 31.3%,98.7% 38.9%,93.0% 50.0%,98.7% 61.1%,88.7% 68.7%,89.1% 81.2%,76.8% 83.6%,71.7% 95.0%,59.6% 91.9%,50.0% 100.0%,40.4% 91.9%,28.3% 95.0%,23.2% 83.6%,10.9% 81.2%,11.3% 68.7%,1.3% 61.1%,7.0% 50.0%,1.3% 38.9%,11.3% 31.3%,10.9% 18.8%,23.2% 16.4%,28.3% 5.0%,40.4% 8.1%);aspect-ratio:1}
.k-burst a{padding:19%}
.k-circle strong,.k-burst strong,.k-oct strong{font-size:1.7rem}
.k-circle span,.k-burst span,.k-oct span{font-size:.95rem;line-height:1.35}
.s7 strong{font-size:2.6rem}
/* kolory */
.c-y{--fill:var(--y)}.c-p{--fill:var(--p)}.c-w{--fill:#fff}
.c-g{--fill:var(--gr);--tx:#f4f1e8}
.c-t{--fill:conic-gradient(#e6e2d6 25%,#fff 0 50%,#e6e2d6 0 75%,#fff 0) 0 0/18px 18px}

/* strona główna: hero + arkusze */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:2rem;align-items:center;padding:clamp(.5rem,3vw,2.5rem) 0 1rem}
.hero h1{grid-column:1;font-size:clamp(3.2rem,10.5vw,6rem);line-height:.9;letter-spacing:-.025em;margin:0 0 1.4rem}
.lead{grid-column:1;font-size:1.2rem;line-height:1.55;color:var(--muted);max-width:33rem;margin:0}
.hero-art{grid-column:2;grid-row:1/span 2;width:100%;max-width:30rem;height:auto;justify-self:end;overflow:visible}
.hero-art .s{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 9px 8px var(--shade));animation:drop 1s var(--ease) both;animation-delay:calc(var(--i)*120ms)}
@keyframes drop{from{transform:translateY(-26px) rotate(-4deg) scale(1.07)}}
.sv{stroke:#fff;stroke-width:16;stroke-linejoin:round;paint-order:stroke}
.sv-y{fill:var(--y)}.sv-p{fill:var(--p)}.sv-g{fill:var(--gr)}.sv-w{fill:var(--paper)}.sv-k{fill:var(--sink)}
.cut{fill:none;stroke:var(--sink);stroke-width:3;stroke-dasharray:11 9}
.sheen{fill:none;stroke:#fff;stroke-opacity:.6;stroke-width:9;stroke-linecap:round}
.sv-k2{fill:none;stroke:var(--sink);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.flap{fill:#e9e3d2}
.group{position:relative;margin:3.8rem 0 0;padding:3.2rem clamp(14px,3vw,36px) 2.6rem;background:var(--sheet) radial-gradient(circle,var(--dot) 1.4px,transparent 1.8px) 0 0/22px 22px;border:2px dashed var(--line);border-radius:32px}
.group h2{position:absolute;top:0;left:clamp(14px,3vw,36px);transform:translateY(-54%) rotate(-1deg);margin:0;padding:.05em .5em;background:var(--bg);font-size:clamp(1.8rem,4vw,2.5rem)}
.group h2::before{content:none}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:26px 22px;align-items:center}
.s3{grid-column-end:span 3}.s4{grid-column-end:span 4}.s5{grid-column-end:span 5}.s6{grid-column-end:span 6}.s7{grid-column-end:span 7}
.x4{grid-column-start:4}.x9{grid-column-start:9}
.g2 .k-rect.s7{margin-top:1rem}
.home>.prose{max-width:none;margin-top:5rem;padding-top:2rem;border-top:2px dashed var(--line)}
.essay{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,40rem);column-gap:3rem;justify-content:start}
.essay h2{grid-column:1;margin:0 0 2.2rem}
.essay p{grid-column:2;margin:0 0 1.2rem}
.essay h2+p{margin-top:.2rem}
.essay h2::before{display:block;margin:0 0 .35em}

/* stopka: podkład z perforacją */
.foot{position:relative;background:var(--liner);color:#e9e5d9;padding:3.4rem 0 1.8rem;margin-top:4.5rem}
.foot::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;background:radial-gradient(circle at 10px 0,transparent 6.5px,var(--liner) 7px) 0 0/20px 10px repeat-x}
.foot-t{margin:0 0 .9rem;font:800 1.9rem/1 var(--disp);color:var(--y)}
.foot-l{list-style:none;margin:0 0 1.8rem;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px}
.foot a{color:#fff;text-decoration-color:var(--p)}
.foot a:hover{background:var(--y);color:var(--sink)}
.copy{margin:0;font-size:.9rem;color:#c9c5b8;border-top:2px dashed #4a4b50;padding-top:1rem}

@media (max-width:900px){
  .page{display:block}
  .page>.related{position:static;margin-top:3rem}
  .related ul{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
  .essay{display:block}
  .essay h2{margin:2rem 0 .6rem}
}
@media (max-width:760px){
  .hero{display:block}
  .hero-art{display:block;max-width:19rem;margin:1.8rem auto 0}
  .tiles{grid-template-columns:minmax(0,1fr);gap:22px}
  .tiles li{grid-column:auto!important;width:min(100%,25rem)}
  .tiles li:nth-child(even){justify-self:end}
  .k-circle,.k-burst,.k-oct{width:min(100%,17.5rem)!important}
  .k-cap a{padding:1.3rem 2rem}
  .k-leaf a{padding:1.6rem 1.8rem}
}
@media (max-width:520px){
  body{font-size:1rem}
  .menu ul{grid-template-columns:1fr}
  .logo img{height:28px}
  .logo{padding:7px 10px}
  .menu summary{font-size:1.05rem;padding:.65rem .9rem}
  .top-in{min-height:72px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .tiles li:hover,.tiles li:focus-within,.related li:hover,.related li:focus-within{transform:rotate(var(--r))}
}