/* LA DIY Pracownia. Mata, miarka i taśmy to sam CSS, bez plików graficznych.
   Grafiki ozdobne i efekty są wyłącznie w bloku @media (min-width:901px), więc telefon ich nie pobiera. */

/* Czcionki z hostingu */
@font-face{font-family:"Karla";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/karla-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:"Karla";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/karla-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:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/bricolage-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:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/bricolage-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{--mata:#F9DDE3;--linia:#F1C8D2;--linia2:#E4A8B8;--papier:#FFFDFA;--tusz:#2E2428;--tusz2:#5E5056;--akcent:#B3264F;--akcent2:#8F1C3E;--musztarda:#E9B949;--szalwia:#8FB8A8;--maskujaca:#F0DDB4;--kremowy:#FBF4E6;
  --cien:0 1px 2px rgba(46,36,40,.14),0 14px 26px -18px rgba(46,36,40,.45);
  --zygzak:polygon(0 0,100% 0,calc(100% - 6px) 12.5%,100% 25%,calc(100% - 6px) 37.5%,100% 50%,calc(100% - 6px) 62.5%,100% 75%,calc(100% - 6px) 87.5%,100% 100%,0 100%,6px 87.5%,0 75%,6px 62.5%,0 50%,6px 37.5%,0 25%,6px 12.5%);
  /* Kolory Astry użyte w starszych wpisach */
  --ast-global-color-0:#B3264F;--ast-global-color-1:#B3264F;--ast-global-color-2:#3A3A3A;--ast-global-color-3:#4B4F58;--ast-global-color-4:#F8F3F5;--ast-global-color-5:#FFFFFF;--ast-global-color-6:#F2F5F7;--ast-global-color-7:#424242;--ast-global-color-8:#000000}

html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background-color:var(--mata);color:var(--tusz);font:400 18px/1.65 Karla,system-ui,sans-serif}
/* Mata leży pod stroną i się nie przesuwa, więc przewijanie jej nie przemalowuje */
body::before{content:"";position:fixed;inset:0;z-index:-1;background-color:var(--mata);
  background-image:linear-gradient(var(--linia2) 1px,transparent 1px),linear-gradient(90deg,var(--linia2) 1px,transparent 1px),linear-gradient(var(--linia) 1px,transparent 1px),linear-gradient(90deg,var(--linia) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.pr{position:relative;z-index:1}
img,svg,video{max-width:100%}
img{height:auto}
h1,h2,h3,h4,h5,h6{position:relative;z-index:2;font-family:"Bricolage Grotesque",Karla,system-ui,sans-serif;color:var(--tusz);margin:0;text-wrap:balance}
a{color:var(--akcent);text-decoration:none;font-weight:700}
a:hover{color:var(--akcent2)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--tusz);outline-offset:2px}
.szer{max-width:1200px;margin-inline:auto;padding-inline:24px}
.ukryte{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.przejdz{position:absolute;left:8px;top:-60px;z-index:20;padding:10px 16px;background:var(--papier);border-radius:6px}
.przejdz:focus{top:8px}

/* Miarka */
.miarka{display:flex;height:28px;overflow:hidden;background-color:var(--papier);border-bottom:1px solid var(--tusz2);
  background-image:repeating-linear-gradient(90deg,var(--tusz) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,var(--tusz2) 0 1px,transparent 1px 8px);
  background-size:100% 12px,100% 6px;background-repeat:no-repeat}
.miarka span{flex:0 0 40px;padding:11px 0 0 3px;font-size:11px;line-height:1.3;color:var(--tusz2)}
/* Miarka przypięta na stałe, na każdej stronie i szerokości */
.pasek-ciecia{position:sticky;top:0;z-index:40;box-shadow:0 2px 6px rgba(46,36,40,.16)}
.admin-bar .pasek-ciecia{top:32px}
@media (max-width:782px){.admin-bar .pasek-ciecia{top:46px}}
@media (max-width:600px){.admin-bar .pasek-ciecia{top:0}}

/* Nagłówek */
.naglowek{background:var(--papier);box-shadow:0 2px 0 rgba(46,36,40,.08)}
.naglowek-w{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:88px}
.logo{display:block;flex:none}
.logo img{display:block;width:96px;height:72px}
.logo-napis{font:700 24px "Bricolage Grotesque",sans-serif;color:var(--tusz)}
.menu,.menu ul{list-style:none;margin:0;padding:0}
.menu{display:flex;align-items:center;gap:4px}
.menu a{display:flex;align-items:center;min-height:48px;padding:0 16px;color:var(--tusz);cursor:pointer}
.menu a:hover,.menu .current-menu-item>a,.menu .current-menu-ancestor>a{color:var(--akcent)}
.menu li{position:relative}
.menu .sub-menu{position:absolute;left:0;top:100%;z-index:30;min-width:240px;padding:8px 0;background:var(--papier);box-shadow:var(--cien);display:none}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{display:block}
.menu .menu-item-has-children>a::after{content:"";width:7px;height:7px;margin:-3px 0 0 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
/* Astra dokleja do menu własne przyciski rozwijania; nasze menu ich nie używa */
.ast-menu-toggle{display:none!important}
.menu-przelacznik{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ikona{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;padding:0 12px;background:none;border:2px solid var(--tusz);border-radius:6px;color:var(--tusz);font:700 16px Karla,system-ui,sans-serif;cursor:pointer;list-style:none}
.ikona::-webkit-details-marker{display:none}
.narzedzia{display:flex;align-items:center;gap:8px}
.tylko-telefon{display:none}
.szukaj{position:relative}
.szukaj-okno{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(420px,calc(100vw - 32px));padding:12px;background:var(--papier);box-shadow:var(--cien)}
.formularz-szukaj{display:flex;gap:8px}
.formularz-szukaj input{flex:1 1 auto;min-width:0;min-height:48px;padding:0 12px;border:2px solid var(--tusz2);border-radius:6px;background:#fff;color:var(--tusz);font:400 18px Karla,system-ui,sans-serif}
.formularz-szukaj button{flex:none;cursor:pointer;font:700 18px Karla,system-ui,sans-serif}

/* Strona główna */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:64px}
.hero h1{font-size:68px;line-height:1.04;font-weight:700;letter-spacing:-.015em}
.hero p{font-size:21px;line-height:1.55;margin:24px 0 0;max-width:34em}
.przyciski{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.przycisk{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:6px;font-weight:700;border:2px solid var(--akcent)}
.przycisk--pelny,.przycisk--pelny:hover{background:var(--akcent);color:#fff}
.przycisk--pelny:hover{background:var(--akcent2);border-color:var(--akcent2)}
.przycisk--pusty{background:var(--papier);color:var(--akcent)}
.stol{position:relative}
.notatka{position:relative;z-index:2;margin:90px 60px 110px;max-width:340px;padding:28px 28px 24px;background:var(--papier);transform:rotate(-1.5deg);box-shadow:0 1px 2px rgba(46,36,40,.14),0 14px 28px -16px rgba(46,36,40,.4)}
.notatka h2{font-size:26px;line-height:1.2}
.notatka ul{list-style:none;margin:14px 0 0;padding:0}
.notatka li+li{border-top:1px dashed var(--linia2)}
.notatka a{display:flex;align-items:center;min-height:48px}
.deko,.boczna{display:none}

/* Taśmy */
.washi{position:absolute;z-index:1;width:112px;height:26px;clip-path:var(--zygzak);opacity:.94}
.washi--paski,.karty li:nth-child(4n+1) .washi{background:repeating-linear-gradient(45deg,var(--szalwia) 0 8px,#B4D2C6 8px 16px)}
.washi--krata,.karty li:nth-child(4n+2) .washi{background-color:#E9A9B9;background-image:linear-gradient(#ffffff66 2px,transparent 2px),linear-gradient(90deg,#ffffff66 2px,transparent 2px);background-size:9px 9px}
.washi--kropki,.karty li:nth-child(4n+3) .washi{background-color:var(--musztarda);background-image:radial-gradient(#fff 2.5px,transparent 3px);background-size:13px 13px}
.washi--maskujaca,.karty li:nth-child(4n+4) .washi{background:var(--maskujaca)}
.na-gorze{top:-13px;left:50%;margin-left:-56px;transform:rotate(-2deg)}
.karty li:nth-child(even) .na-gorze{transform:rotate(2.5deg)}
.na-rogu{top:-13px;right:32px;transform:rotate(3deg)}
.tasma-lewa{top:-12px;left:32px;transform:rotate(-4deg)}
.tasma-prawa{top:-12px;right:32px;transform:rotate(3deg)}

/* Sekcje */
.sekcja{padding-block:40px}
.sekcja>.szer>h2{font-size:38px;line-height:1.15;font-weight:700;margin-bottom:28px}
.organizer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;list-style:none;margin:0;padding:0;background:var(--linia2);border:1px solid var(--linia2);box-shadow:var(--cien)}
.organizer li{background:var(--papier)}
.przegroda{display:flex;align-items:center;gap:14px;height:100%;min-height:84px;padding:14px 18px;color:var(--tusz);line-height:1.25}
.przegroda:hover{background:var(--kremowy);color:var(--akcent2)}
.przegroda:focus-visible{outline-offset:-3px}
.przegroda svg{flex:none;width:32px;height:32px;fill:none;stroke:var(--akcent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.karty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;list-style:none;margin:0;padding:0}
.karta{position:relative;height:100%;background:var(--papier);padding:12px 12px 18px;box-shadow:var(--cien)}
.karta-foto{display:block}
.karta img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.karta h3{font-size:21px;line-height:1.25;font-weight:600;margin-top:14px}
.karta h3 a{color:var(--tusz);font-weight:inherit}
.karta h3 a:hover{color:var(--akcent)}
.druk{position:relative;background-color:var(--papier);background-image:linear-gradient(#DCE6EC 1px,transparent 1px),linear-gradient(90deg,#DCE6EC 1px,transparent 1px);background-size:24px 24px;padding:40px;box-shadow:var(--cien)}
.druk h2{font-size:38px;line-height:1.15;margin-bottom:8px}
.druk>p{margin:0 0 16px;max-width:40em}
.druk ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.druk li{border-top:1px solid var(--tusz2);background:var(--papier)}
.druk a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding-block:8px}
.znacznik{flex:none;padding:2px 8px;border:2px solid var(--tusz);border-radius:4px;font-size:14px;line-height:1.3;color:var(--tusz)}
.o-siatka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.arkusz-maly{background:var(--papier);padding:28px;box-shadow:var(--cien)}
.arkusz-maly h2{font-size:26px;line-height:1.2;margin-bottom:12px}
.arkusz-maly p{margin:0;font-size:17px}
.pusto{background:var(--papier);padding:32px;margin-bottom:28px;box-shadow:var(--cien)}
.pusto h1{font-size:40px;line-height:1.15;margin-bottom:12px}
.pusto p{margin:0 0 16px}
.pusto .formularz-szukaj{max-width:520px}

/* Stopka */
.stopka{margin-top:32px;background:var(--papier);border-top:1px solid var(--tusz2)}
.stopka-w{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-block:40px 20px}
.stopka h2{font:700 14px/1.3 Karla,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--tusz2);margin-bottom:10px}
.stopka ul{list-style:none;margin:0;padding:0;columns:3;column-gap:48px}
.stopka li{break-inside:avoid}
.stopka ul a{display:flex;align-items:center;min-height:44px;font:600 18px/1.25 "Bricolage Grotesque",Karla,system-ui,sans-serif;color:var(--tusz)}
.stopka ul a:hover{color:var(--akcent)}
.stopka-dol{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-block:8px 24px;font-size:16px;color:var(--tusz2)}
.stopka-dol a{display:inline-flex;align-items:center;min-height:44px}

/* Listy i kategorie */
.kat-hero{padding-block:36px 24px}
.kat-zdjecie{position:relative;margin:0;background:var(--papier);padding:10px;box-shadow:0 1px 2px rgba(46,36,40,.14),0 18px 34px -22px rgba(46,36,40,.5)}
.kat-zdjecie img{display:block;width:100%;aspect-ratio:21/8;object-fit:cover}
.kat-notatka{position:relative;z-index:3;max-width:620px;margin:-64px 0 0 40px;padding:24px 32px 26px;background:var(--papier);box-shadow:0 1px 2px rgba(46,36,40,.14),0 14px 28px -16px rgba(46,36,40,.4)}
.kat-notatka.bez-zdjecia{margin:0}
.kat-notatka h1{font-size:52px;line-height:1.08;font-weight:700;letter-spacing:-.01em}
.kat-opis,.kat-opis p{margin:10px 0 0}
.pagination,.navigation.pagination{margin-top:36px}
.nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 12px;background:var(--papier);color:var(--tusz);border:1px solid var(--linia2)}
.page-numbers.current{background:var(--akcent);border-color:var(--akcent);color:#fff}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Wpis */
.okruszki{font-size:16px;padding-block:18px}
.arkusz-pole{position:relative;max-width:820px;margin:0 auto 48px}
.arkusz{position:relative;background:var(--papier);padding:48px 56px 56px;box-shadow:0 1px 2px rgba(46,36,40,.14),0 18px 34px -22px rgba(46,36,40,.45)}
.arkusz h1{font-size:46px;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.meta{margin:14px 0 24px;font-size:16px;color:var(--tusz2)}
.miniatura{position:relative;margin:0 0 26px}
.miniatura img{display:block;width:100%}
.spis{background:var(--kremowy);padding:20px 24px;margin:26px 0}
.spis-tytul{margin:0 0 6px;font:700 20px "Bricolage Grotesque",Karla,sans-serif}
.spis ol{margin:0;padding-left:22px}
.tresc .spis a{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;line-height:1.25;font-weight:400;color:var(--akcent)}
.tresc .spis a:hover{background:none;color:var(--akcent2)}
.sasiednie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:36px;padding-top:20px;border-top:1px solid var(--tusz2)}
.sasiednie a{flex:1 1 240px;line-height:1.3}
.sasiednie a+a{text-align:right}

/* Treść wpisu: bloki i starsze wpisy */
.tresc{overflow-wrap:break-word}
.tresc h2{font-size:30px;line-height:1.2;font-weight:700;margin:44px 0 12px;scroll-margin-top:80px}
.tresc h3{font-size:23px;line-height:1.25;font-weight:700;margin:32px 0 10px}
.tresc h4,.tresc h5,.tresc h6{font-size:19px;line-height:1.3;font-weight:700;margin:24px 0 8px}
.tresc p{margin:0 0 18px}
.tresc ul,.tresc ol{margin:0 0 18px;padding-left:26px}
.tresc li{margin-bottom:6px}
.tresc p a,.tresc li a{padding-inline:2px;background:linear-gradient(transparent 58%,var(--mata) 58%)}
.tresc p a:hover,.tresc li a:hover{background:var(--mata)}
.tresc figure{margin:26px 0;max-width:100%}
.tresc figure img{display:block}
.tresc>figure.wp-block-image{position:relative}
.tresc>figure.wp-block-image>img,.tresc>figure.wp-block-image>a>img{margin-inline:auto}
.tresc>figure.wp-block-image::before{content:"";position:absolute;z-index:1;top:-13px;left:50%;width:112px;height:26px;margin-left:-56px;clip-path:var(--zygzak);opacity:.94;transform:rotate(-2deg);background:repeating-linear-gradient(45deg,var(--szalwia) 0 8px,#B4D2C6 8px 16px)}
.tresc>figure.wp-block-image:nth-of-type(even)::before{transform:rotate(2.5deg);background:var(--maskujaca)}
.tresc figcaption{margin-top:8px;font-size:15px;color:var(--tusz2);text-align:center}
.tresc .alignleft{float:left;margin:6px 24px 12px 0;max-width:50%}
.tresc .alignright{float:right;margin:6px 0 12px 24px;max-width:50%}
.tresc .aligncenter{margin-inline:auto;text-align:center}
.tresc .alignwide,.tresc .alignfull{width:100%;max-width:100%}
.tresc blockquote{margin:26px 0;padding:20px 24px;background:var(--kremowy)}
.tresc blockquote p:last-child{margin-bottom:0}
.tresc cite{display:block;margin-top:8px;font-size:15px;color:var(--tusz2)}
.tresc .wp-block-table{overflow-x:auto;margin:26px 0}
.tresc table{width:100%;border-collapse:collapse;font-size:16px}
.tresc th,.tresc td{padding:10px 12px;border:1px solid #D8CBD0;text-align:left;vertical-align:top}
.tresc th{background:var(--kremowy)}
.tresc iframe,.tresc object,.tresc embed,.tresc video{max-width:100%}
.tresc .wp-block-embed__wrapper,.tresc .ast-oembed-container{position:relative;aspect-ratio:16/9;height:auto!important;padding:0!important}
.tresc .wp-block-embed__wrapper iframe,.tresc .ast-oembed-container iframe{position:absolute;inset:0;width:100%;height:100%}
.tresc .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.tresc .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 24px;border-radius:6px;border:2px solid var(--akcent);background:var(--akcent);color:#fff;font-weight:700;line-height:1.25;text-align:center}
.tresc .wp-block-button__link:hover{background:var(--akcent2);border-color:var(--akcent2);color:#fff}
.tresc .is-style-outline>.wp-block-button__link{background:var(--papier);color:var(--akcent)}
.tresc .wp-block-file{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:26px 0}
.tresc .wp-block-file__embed{width:100%}
.tresc .wp-block-file__button{display:inline-flex;align-items:center;min-height:48px;padding:8px 20px;border-radius:6px;background:var(--akcent);color:#fff}
.tresc .wp-block-file__button:hover{background:var(--akcent2);color:#fff}
.tresc .wp-block-columns{display:flex;flex-wrap:wrap;gap:24px;margin:26px 0}
.tresc .wp-block-gallery{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.tresc .schema-faq,.tresc .schema-how-to{margin:32px 0}
.tresc .schema-faq-section{padding:14px 0;border-top:1px solid #D8CBD0}
.tresc .schema-faq-question{display:block;font:700 19px/1.3 "Bricolage Grotesque",Karla,sans-serif;margin-bottom:6px}
.tresc .schema-faq-answer{margin:0}
.tresc .schema-how-to-steps{padding-left:26px}
.tresc .schema-how-to-step{margin-bottom:18px}
.tresc .schema-how-to-step-name{display:block;font:700 19px/1.3 "Bricolage Grotesque",Karla,sans-serif;margin-bottom:4px}
.tresc .schema-how-to-total-time{font-size:16px;color:var(--tusz2)}
.tresc::after{content:"";display:table;clear:both}
.has-text-align-center{text-align:center}
.has-text-align-left{text-align:left}
.has-text-align-right{text-align:right}
.has-ast-global-color-0-color{color:var(--ast-global-color-0)}.has-ast-global-color-1-color{color:var(--ast-global-color-1)}.has-ast-global-color-2-color{color:var(--ast-global-color-2)}.has-ast-global-color-3-color{color:var(--ast-global-color-3)}.has-ast-global-color-4-color{color:var(--ast-global-color-4)}.has-ast-global-color-5-color{color:var(--ast-global-color-5)}.has-ast-global-color-6-color{color:var(--ast-global-color-6)}.has-ast-global-color-7-color{color:var(--ast-global-color-7)}.has-ast-global-color-8-color{color:var(--ast-global-color-8)}
.has-ast-global-color-0-background-color{background-color:var(--ast-global-color-0)}.has-ast-global-color-1-background-color{background-color:var(--ast-global-color-1)}.has-ast-global-color-2-background-color{background-color:var(--ast-global-color-2)}.has-ast-global-color-3-background-color{background-color:var(--ast-global-color-3)}.has-ast-global-color-4-background-color{background-color:var(--ast-global-color-4)}.has-ast-global-color-5-background-color{background-color:var(--ast-global-color-5)}.has-ast-global-color-6-background-color{background-color:var(--ast-global-color-6)}.has-ast-global-color-7-background-color{background-color:var(--ast-global-color-7)}.has-ast-global-color-8-background-color{background-color:var(--ast-global-color-8)}

/* Efekty i dekoracje: elementy niewidoczne poza komputerem */
.krata-swiatlo,.ciecie-sekcji,.linia-ciecia{display:none}

/* Komputer */
@media (min-width:901px){
  .menu-przelacznik{display:none}
  /* Dekoracje na stole: pliki pobierane tylko tu */
  .deko{display:block;position:absolute;background-repeat:no-repeat;background-size:contain;pointer-events:none}
  .d-krata{left:0;top:0;width:440px;height:440px;background-image:url(../img/krata.svg);opacity:.9}
  .d-nozyczki{width:150px;height:75px;right:0;top:-20px;background-image:url(../img/nozyczki.svg);rotate:14deg}
  .d-tasma{width:92px;height:92px;left:20px;bottom:8px;background-image:url(../img/tasma.svg)}
  .d-washi{width:76px;height:76px;left:120px;bottom:8px;background-image:url(../img/washi.svg)}
  .d-pedzel{width:210px;height:42px;right:0;bottom:24px;background-image:url(../img/pedzel.svg);rotate:-6deg}
  .d-farba{width:132px;height:60px;left:20px;top:6px;background-image:url(../img/farba.svg);rotate:-12deg}
  .d-klej{width:40px;height:110px;right:2px;top:180px;background-image:url(../img/klej.svg);rotate:8deg}

  /* Efekt 1: nożyczki na miarce we wpisie */
  .linia-ciecia{display:block;position:relative;height:34px;overflow:hidden;background-color:var(--papier);background-image:repeating-linear-gradient(90deg,var(--tusz2) 0 8px,transparent 8px 15px);background-size:100% 2px;background-position:0 50%;background-repeat:no-repeat}
  .rozciecie{position:absolute;left:0;top:50%;width:100%;height:6px;margin-top:-3px;background:var(--mata);border-block:1px solid var(--tusz2);transform-origin:0 50%;transform:scaleX(.03)}
  .nozyczki-ruchome{position:absolute;left:0;top:1px;width:64px;height:32px}
  .nozyczki-ruchome svg{display:block;width:64px;height:32px;overflow:visible}
  .ramie{transform-origin:56px 30px}
  .nozyczki-ruchome .ramie-a{transform:rotate(-3deg)}
  .nozyczki-ruchome .ramie-b{transform:rotate(3deg)}
  .gotowe{position:absolute;right:76px;top:6px;padding:0 8px;background:var(--musztarda);color:var(--tusz);font-size:14px;font-weight:700;line-height:22px;border-radius:3px}
  .gotowe[hidden]{display:none}

  /* Efekt 3: linia cięcia między sekcjami; bez wsparcia animacji widać gotową linię */
  .ciecie-sekcji{display:block;position:relative;height:44px;margin-block:12px;overflow:clip;container-type:inline-size}
  .slad{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--tusz2) 0 9px,transparent 9px 17px);clip-path:inset(0 34px 0 0)}
  .noz-sekcji{position:absolute;left:0;top:6px;width:64px;height:32px;transform:translateX(calc(100cqw - 64px))}
  .noz-sekcji svg{display:block;width:64px;height:32px;overflow:visible}
  .noz-sekcji .ramie-a{rotate:-3deg}
  .noz-sekcji .ramie-b{rotate:3deg}

  /* Efekt 8: krata przy kursorze */
  .krata-swiatlo{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .25s;--x:-400px;--y:-400px;
    background-image:linear-gradient(#B3264F 1px,transparent 1px),linear-gradient(90deg,#B3264F 1px,transparent 1px);background-size:24px 24px;
    -webkit-mask-image:radial-gradient(circle 190px at var(--x) var(--y),#000 0,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(circle 190px at var(--x) var(--y),#000 0,rgba(0,0,0,.55) 45%,transparent 100%)}
  .krata-swiatlo.wlaczone{opacity:.8}
}

/* Dekoracje przy wpisie tylko wtedy, gdy obok arkusza jest na nie miejsce */
@media (min-width:1241px){
  .boczna{display:block;position:absolute;background-repeat:no-repeat;background-size:contain;pointer-events:none}
  .b-nozyczki{width:150px;height:75px;left:-190px;top:120px;background-image:url(../img/nozyczki.svg);rotate:-16deg}
  .b-pedzel{width:190px;height:38px;right:-212px;top:420px;background-image:url(../img/pedzel.svg);rotate:82deg}
  .b-tasma{width:92px;height:92px;right:-130px;top:90px;background-image:url(../img/tasma.svg)}
  .b-farba{width:130px;height:59px;left:-170px;top:760px;background-image:url(../img/farba.svg);rotate:12deg}
  .b-klej{width:40px;height:110px;right:-90px;top:1180px;background-image:url(../img/klej.svg);rotate:-10deg}
  .b-washi{width:76px;height:76px;left:-120px;top:1320px;background-image:url(../img/washi.svg)}
}

/* Efekty przy przewijaniu z samego CSS: tylko komputer, tylko gdy przeglądarka je zna i ruch nie jest wyłączony */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* Efekt 2: zdjęcie osiada, taśma się odwija */
    .karta,.kat-zdjecie,.miniatura,.tresc>figure.wp-block-image{view-timeline:--zdjecie block}
    .karta,.tresc>figure.wp-block-image{animation:osiada linear both;animation-timeline:--zdjecie;animation-range:entry 0% entry 60%}
    .karta .washi,.kat-zdjecie .washi{transform-origin:0 50%;animation:odwija linear both;animation-timeline:--zdjecie;animation-range:entry 45% entry 100%}
    .tresc>figure.wp-block-image::before{transform-origin:0 50%;animation:odwija linear both;animation-timeline:--zdjecie;animation-range:entry 45% entry 100%}

    /* Efekt 3 */
    .ciecie-sekcji{view-timeline:--ciecie block}
    .slad,.noz-sekcji,.noz-sekcji .ramie{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ciecie;animation-range:cover 8% cover 62%}
    .slad{animation-name:slad-rosnie}
    .noz-sekcji{animation-name:noz-jedzie}
    .noz-sekcji .ramie-a{animation-name:klap-a}
    .noz-sekcji .ramie-b{animation-name:klap-b}

    /* Efekt 4: narzędzia w różnym tempie, tylko góra strony głównej */
    .deko{animation:linear both;animation-timeline:scroll(root block);animation-range:0px 620px}
    .d-washi,.d-tasma{animation-name:tempo-wolne}
    .d-klej,.d-pedzel{animation-name:tempo-srednie}
    .d-farba,.d-nozyczki{animation-name:tempo-szybkie}
  }
}
@keyframes osiada{from{transform:translateY(46px) rotate(-2.5deg) scale(.95);opacity:.35}to{transform:none;opacity:1}}
@keyframes odwija{from{scale:0 1}to{scale:1 1}}
@keyframes slad-rosnie{from{clip-path:inset(0 calc(100% - 30px) 0 0)}to{clip-path:inset(0 34px 0 0)}}
@keyframes noz-jedzie{from{transform:translateX(0)}to{transform:translateX(calc(100cqw - 64px))}}
@keyframes klap-a{0%,20%,40%,60%,80%,100%{rotate:-3deg}10%,30%,50%,70%,90%{rotate:-19deg}}
@keyframes klap-b{0%,20%,40%,60%,80%,100%{rotate:3deg}10%,30%,50%,70%,90%{rotate:19deg}}
@keyframes tempo-wolne{to{translate:0 170px}}
@keyframes tempo-srednie{to{translate:0 90px}}
@keyframes tempo-szybkie{to{translate:0 -60px}}

/* Tablet i mniejszy komputer */
@media (max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr);padding-block:40px}
  .karty{grid-template-columns:repeat(2,minmax(0,1fr))}
  .organizer{grid-template-columns:repeat(3,minmax(0,1fr))}
  .o-siatka{grid-template-columns:minmax(0,1fr)}
  .deko{display:none}
  .notatka{margin:0 auto}
  .arkusz-pole{margin-inline:16px}
}

/* Menu pod przyciskiem */
@media (max-width:900px){
  .tylko-telefon{display:inline-flex}
  .menu-glowne{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;padding:8px 16px 16px;background:var(--papier);box-shadow:var(--cien)}
  .menu-przelacznik:checked~.menu-glowne{display:block}
  .menu-przelacznik:focus-visible~.narzedzia label{outline:3px solid var(--tusz);outline-offset:2px}
  .menu{display:block}
  .menu a{padding:0 4px}
  .menu>li>a:not([href]){margin-top:10px;font-family:Karla,sans-serif;font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--tusz2);min-height:32px}
  .menu>li>a:not([href])::after{display:none}
  .menu .sub-menu{display:block;position:static;min-width:0;padding:0;box-shadow:none}
  .menu .sub-menu a{font-weight:700}
}

/* Telefon: treść najpierw */
@media (max-width:640px){
  .szer{padding-inline:16px}
  .naglowek-w{min-height:68px;gap:8px}
  .logo img{width:72px;height:54px}
  .ikona{padding:0 10px}
  .miarka{height:22px;background-size:100% 9px,100% 5px}
  .miarka span{padding-top:8px;font-size:10px}
  .hero{padding-block:28px 12px;gap:24px}
  .hero h1{font-size:40px;line-height:1.08}
  .hero p{font-size:18px;margin-top:14px}
  .przyciski{margin-top:20px}
  .przycisk{flex:1 1 150px;justify-content:center;padding:6px 10px;font-size:16px;line-height:1.2;text-align:center}
  .notatka{margin:0;max-width:none;transform:none;padding:22px 18px 12px}
  .notatka h2{font-size:22px}
  .sekcja{padding-block:24px}
  .sekcja>.szer>h2,.druk h2{font-size:28px;margin-bottom:28px}
  .druk h2{margin-bottom:8px}
  .organizer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .przegroda{flex-direction:column;justify-content:center;gap:8px;min-height:104px;padding:12px 8px;text-align:center;font-size:16px}
  .karty{grid-template-columns:minmax(0,1fr);gap:32px}
  .karta h3{font-size:20px}
  .druk{padding:24px 16px}
  .druk ul{grid-template-columns:minmax(0,1fr)}
  .arkusz-maly{padding:20px 16px}
  .stopka-w{padding-block:28px 12px}
  .stopka ul{columns:2;column-gap:20px}
  .stopka ul a{font-size:16px}
  .kat-hero{padding-block:22px 8px}
  .kat-zdjecie{padding:6px}
  .kat-zdjecie img{aspect-ratio:16/10}
  .tasma-lewa{left:12px}
  .tasma-prawa{right:12px}
  .kat-notatka{margin:-26px 10px 0;padding:16px 16px 18px}
  .kat-notatka.bez-zdjecia{margin:0}
  .kat-notatka h1{font-size:32px;line-height:1.12}
  .okruszki{padding-block:10px;font-size:15px}
  .arkusz-pole{margin:14px -8px 24px}
  .arkusz{padding:24px 16px 28px}
  .arkusz h1{font-size:32px;line-height:1.13}
  .meta{font-size:15px;margin:10px 0 18px}
  .tresc h2{font-size:25px;margin:34px 0 10px}
  .tresc h3{font-size:21px}
  .spis,.tresc blockquote{padding:16px}
  .miniatura,.tresc>figure.wp-block-image{margin-inline:-16px}
  .tresc .alignleft,.tresc .alignright{float:none;margin:20px auto;max-width:100%}
  .pusto{padding:20px 16px}
  .pusto h1{font-size:30px}
}

/* Druk: sama treść */
@media print{
  body::before,.miarka,.pasek-ciecia,.naglowek,.stopka,.okruszki,.sekcja,.washi,.spis,.sasiednie,.krata-swiatlo{display:none!important}
  body{background:#fff}
  .arkusz{box-shadow:none;padding:0}
}