/* ═══════════════════════════════════════════════════════════════════════
   KREATIVNÍ MÁMA · ZÁKLAD (vlastník V1, SPEC 1.1 kap. 2, 3.1 až 3.6, 6.2, 6.4)
   Tokeny, písmo, materiály stolu, ozdoby, předměty, tlačítka, pole, úrovně
   pohybu a tisk. Načítá se na každé stránce z casti/hlava.html hned po
   style.css (kostra), takže stejně pojmenované tokeny kostry přebíjí.

   Pravidla souboru:
   · Bloky převzaté ze SPEC jsou doslova; co přidává V1, je označené
     „NAVÍC (V1)“ a v komentáři říká proč.
   · Mimo :root žádný syrový HEX ani RGB (výjimky: data: URI a SVG atributy,
     vždy s komentářem, kterému tokenu odpovídají).
   · Animuje se jen transform, translate, rotate, scale, opacity (SPEC 6.4).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ TOKENY (SPEC 2.1, doslova) ═══ */
:root{
  /* ═══ KREATIVNÍ MÁMA · tokeny · SPEC 1.1 (25. 9. 2026) ═══════════════════
     Paleta „Pastelky na kraftu“ (docs/tym/02-paleta.md). HEX je závazný.
     Hlídač oranžové: žádný token nemá odstín 35–75° s chromou nad 0,04
     (výjimka: blok OBSAH, pleť a vlasy v omalovánce). Průhlednost jen přes
     rgb(var(--…-rgb) / x) nebo color-mix(). */

  /* ── PODKLADY: stůl dílničky ─────────────────────────────────────────── */
  --papir:#FFFFFF;        /* bílá: stránka („stůl“), od 6. 10. 2026 bez krému a zrna */
  --list:#FFFFFF;         /* čistý list: karty, okna, pole, papír pod výsledkem */
  --papir-2:#F1ECFF;      /* jemná levandule místo béžové (6. 10. 2026): jamky, záložky, klidné plochy */
  --kraft:#F7E890;        /* máslová pastelka místo krafu: visačky a karta hlasování (nikdy plocha sekce) */
  --kraft-syty:#F5D83D;   /* sytá máslová místo krafu: páska, rámeček, podklad razítka */
  --papir-rgb:255 255 255;
  --list-rgb:255 255 255;

  /* ── PASTELOVÉ POVRCHY (text na nich vždy --ink) ─────────────────────── */
  --p-mas:#F7E890;        /* máslová: OMALOVÁNKY */
  --p-neb:#A4DBFF;        /* nebeská: POSTAVIČKY JAKO Z ANIMÁKU */
  --p-ruz:#FFBDD6;        /* babiččina růže: STARÉ FOTKY */
  --p-lev:#D4C2FF;        /* levandulová: kouzlo, kredity, účet */
  --p-mat:#A0F0D1;        /* mátová: bezpečí, soukromí, hotovo */

  /* ── SVĚTLÉ TÓNY (podklad jamek, hover, neaktivní) ───────────────────── */
  --t-mas:#FCF7D7; --t-neb:#E4F4FF; --t-ruz:#FFEAF1; --t-lev:#F1ECFF; --t-mat:#DFFAEE;

  /* ── PASTELKY (samolepky, pásky, ilustrace, hobliny a drobky, zvýrazňovač) ── */
  --s-mas:#F5D83D; --s-neb:#62BBF5; --s-ruz:#F577AF; --s-lev:#AA88EF; --s-mat:#54D8B1;
  --s-pis:#97DD7F;        /* tráva: jen ilustrace, pastelka v omalovánce a hobliny */
  --s-mas-rgb:245 216 61; --s-neb-rgb:98 187 245; --s-ruz-rgb:245 119 175;
  --s-lev-rgb:170 136 239; --s-mat-rgb:84 216 177;

  /* ── INKOUST ─────────────────────────────────────────────────────────── */
  --ink:#301834;          /* švestkový inkoust: veškerý text */
  --ink-dim:#5C455F;      /* tlumený text: popisky, meta */
  --ink-rgb:48 24 52;
  --ink-hrana:#1B0C1E;    /* spodní hrana inkoustového tlačítka (inkoust −40 %) */

  /* ── AKCE: jediná barva, která říká „klikni“ ─────────────────────────── */
  --akce:#C82472; --akce-h:#B31564; --akce-a:#9B1156;
  --akce-rgb:200 36 114;
  --na-akci:var(--list);

  /* ── KOUZLO: odkazy, výběr, focus, štítek AI, razítko ────────────────── */
  --kouzlo:#6932BB; --kouzlo-h:#57269E; --kouzlo-rgb:105 50 187;
  --focus:var(--kouzlo);

  /* ── STAVY ───────────────────────────────────────────────────────────── */
  --uspech:#006B47; --uspech-bg:#D9F9E8;
  --chyba:#B51E26;  --chyba-bg:#FFEBEA;

  /* ── LINKY ───────────────────────────────────────────────────────────── */
  --linka:#E8E2F3;        /* vlasová linka (dekor), levandulová šeď místo béžové */
  --pole-linka:#8C798F;   /* obrys pole a ovládacích prvků (≥ 3 : 1) */
  --pole-linka-h:var(--ink-dim);

  /* ── NOC: jen patička ────────────────────────────────────────────────── */
  --noc:#2D1534; --noc-2:#41274B;
  --noc-text:var(--papir); --noc-text-dim:#D3C5D8;
  --noc-linka:rgb(var(--papir-rgb) / .16);

  /* ── OBSAH, NE PALETA (jen pastelky v omalovánce a ilustrace V6) ──────
     Pleť a vlasy jsou obsah; hlídač oranžové se na ně nevztahuje.
     Pleť do růžova, ne do oranžova (02, kap. 7). */
  --obsah-plet-1:#F9D3CA; /* světlá pleť, oklch(89,7 % 0,045 34) */
  --obsah-plet-2:#E3AE9A; /* snědá pleť */
  --obsah-plet-3:#B98270; /* tmavší pleť */
  --obsah-vlasy:#7A5145;  /* kakaová, vlasy a srst */

  /* ── STÍNY: vždy tónované inkoustem, světlo shora a mírně zleva ─────────
     Vodorovný posun ≈ čtvrtina svislého (stín padá vpravo dolů). Okna jsou
     nad stolem, proto souměrná. Žádná barevná záře, žádný lesk. */
  --stin-karta:1px 1px 2px rgb(var(--ink-rgb) / .06),4px 14px 30px -12px rgb(var(--ink-rgb) / .18);
  --stin-zvednuta:1px 2px 4px rgb(var(--ink-rgb) / .06),6px 24px 44px -16px rgb(var(--ink-rgb) / .26);
  --stin-samolepka:1px 1px 1px rgb(var(--ink-rgb) / .10),2px 6px 14px -4px rgb(var(--ink-rgb) / .24);
  --stin-paska:1px 1px 1px rgb(var(--ink-rgb) / .08);
  --stin-okno:0 12px 24px -12px rgb(var(--ink-rgb) / .25),0 40px 90px -24px rgb(var(--ink-rgb) / .40);
  /* --stin-magnetka zrušen: magnetka je tenký matný tisk na magnetickém papíru (kap. 3.4.3) */
  --zare-akce:0 8px 16px -10px rgb(var(--ink-rgb) / .35);     /* kontaktní stín inkoustem, žádná malinová záře */
  --zare-inkoust:0 8px 16px -10px rgb(var(--ink-rgb) / .40);

  /* ── MATERIÁLY (textury jako data: URI, žádný požadavek na síť) ──────── */
  --zrno:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .19 0 0 0 0 .09 0 0 0 0 .2 0.5 0 0 0 -0.290'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23a%29'/%3E%3C/svg%3E");
  --vlakna:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7 .16' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .9 0.45 0 0 0 -0.270'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23v%29'/%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .22 0 0 0 0 .12 0.8 0 0 0 -0.544'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23t%29'/%3E%3C/svg%3E");
  /* trhaný okraj a jeho světlé vlákno (vygenerováno, dlaždice 360 × 18 navazuje bez švu) */
  --natrzeno:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0H360V11.1 L355.0 9.8 L352.0 12.9 L349.0 12.4 L343.0 13.7 L340.5 13.3 L337.0 14.3 L332.0 11.2 L328.0 11.5 L325.0 11.2 L322.5 12.3 L318.5 12.8 L316.0 10.8 L313.0 10.3 L307.0 9.1 L301.0 10.7 L295.0 10.5 L290.0 10.1 L286.5 10.5 L283.5 11.3 L280.0 11.7 L276.0 11.9 L273.0 10.0 L270.5 8.0 L266.5 9.2 L260.5 10.8 L257.5 8.4 L252.5 10.2 L249.0 11.0 L245.5 10.6 L239.5 8.9 L237.0 9.7 L232.0 10.9 L227.0 10.5 L223.5 9.6 L220.5 10.7 L216.5 13.1 L214.0 10.6 L210.5 10.9 L205.5 12.1 L200.5 13.5 L197.5 10.3 L192.5 11.7 L189.5 11.6 L185.5 13.9 L181.5 13.6 L175.5 13.7 L171.5 12.2 L166.5 10.7 L163.5 10.1 L158.5 8.7 L155.0 10.4 L152.5 10.4 L149.5 9.4 L145.5 9.6 L141.5 6.8 L137.5 5.1 L132.5 5.8 L128.5 5.5 L122.5 4.9 L120.0 4.3 L116.5 7.6 L110.5 6.2 L106.5 8.8 L103.0 7.7 L97.0 8.2 L94.5 7.1 L90.5 6.8 L87.0 9.2 L82.0 6.8 L79.5 7.1 L76.0 7.2 L73.5 8.7 L67.5 10.2 L64.0 7.9 L58.0 9.9 L54.5 11.1 L51.0 9.9 L47.0 10.3 L44.5 10.0 L41.5 10.3 L38.5 11.2 L33.5 10.5 L30.0 11.6 L27.0 10.7 L24.5 11.1 L21.5 10.7 L17.5 9.1 L13.5 9.2 L8.5 9.7 L6 12.4 L0 11.1Z'/%3E%3C/svg%3E");
  --natrzeno-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0H360V8.1 L355.0 6.8 L352.0 9.9 L349.0 9.4 L343.0 10.7 L340.5 10.3 L337.0 11.3 L332.0 8.2 L328.0 8.5 L325.0 8.2 L322.5 9.3 L318.5 9.8 L316.0 7.8 L313.0 7.3 L307.0 6.1 L301.0 7.7 L295.0 7.5 L290.0 7.1 L286.5 7.5 L283.5 8.3 L280.0 8.7 L276.0 8.9 L273.0 7.0 L270.5 5.0 L266.5 6.2 L260.5 7.8 L257.5 5.4 L252.5 7.2 L249.0 8.0 L245.5 7.6 L239.5 5.9 L237.0 6.7 L232.0 7.9 L227.0 7.5 L223.5 6.6 L220.5 7.7 L216.5 10.1 L214.0 7.6 L210.5 7.9 L205.5 9.1 L200.5 10.5 L197.5 7.3 L192.5 8.7 L189.5 8.6 L185.5 10.9 L181.5 10.6 L175.5 10.7 L171.5 9.2 L166.5 7.7 L163.5 7.1 L158.5 5.7 L155.0 7.4 L152.5 7.4 L149.5 6.4 L145.5 6.6 L141.5 3.8 L137.5 2.1 L132.5 2.8 L128.5 2.5 L122.5 2 L120.0 2 L116.5 4.6 L110.5 3.2 L106.5 5.8 L103.0 4.7 L97.0 5.2 L94.5 4.1 L90.5 3.8 L87.0 6.2 L82.0 3.8 L79.5 4.1 L76.0 4.2 L73.5 5.7 L67.5 7.2 L64.0 4.9 L58.0 6.9 L54.5 8.1 L51.0 6.9 L47.0 7.3 L44.5 7.0 L41.5 7.3 L38.5 8.2 L33.5 7.5 L30.0 8.6 L27.0 7.7 L24.5 8.1 L21.5 7.7 L17.5 6.1 L13.5 6.2 L8.5 6.7 L6 9.4 L0 8.1Z'/%3E%3C/svg%3E");

  /* pauzák: průsvitný papír, pod kterým je výsledek tušit (podpis značky, kap. 3.3.5) */
  --pauzak:rgb(var(--list-rgb) / .78);
  /* plsť nástěnky Máma mámě: hustší a měkčí šum než papír, tónovaný inkoustem */
  --plst:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .19 0 0 0 0 .09 0 0 0 0 .2 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");

  /* ── PÍSMO ───────────────────────────────────────────────────────────── */
  --f-titul:'Playfair Display','Fraunces-nahrada',Georgia,'Times New Roman',serif;  /* hlas značky: tučná kontrastní antikva jako nápis loga ve videích */
  --f-ui:'Figtree','Figtree-nahrada',ui-sans-serif,system-ui,sans-serif;    /* hlas dílny */
  /* --f-ruka zrušeno: ruka je vektorový lettering zakladatelky (kap. 3.3.4), žádné rukopisné písmo */

  /* ── TYPOGRAFICKÁ ŠKÁLA: H1 : H2 ≥ 1,5 na každé šířce ───────────────── */
  --t-h1-uvod:clamp(40px,3.4vw + 12px,62px); /* záloha; ve velkém banneru platí clamp(40px,16cqi,64px) (kap. 4.1.2) */
  --t-h1:clamp(36px,2.4vw + 16px,52px);      /* H1 detailu, účtu, Bezpečí; vždy ≤ --t-h1-uvod */
  --t-h2:clamp(30px,1.6vw + 18px,42px);      /* vyprávěcí sekce: Jak, Bezpečí, Na dárek, Nápady, Máma mámě, Ceny */
  --t-h2-uzitek:clamp(24px,.8vw + 16px,30px);/* užitkové sekce: Mohlo by Vás zajímat, Časté dotazy, sekce pod detailem */
  --t-banner:clamp(26px,1.2vw + 14px,32px);  /* malé bannery */
  --t-h3:clamp(20px,.6vw + 14px,24px);       /* okna, kroky, lístky */
  --t-karta:19px;                            /* název v kartě, varianta */
  --t-cislo:64px;                            /* velké číslo nádoby (5 / 20 / 40) */
  --t-lead:clamp(17px,.4vw + 13px,19px);     /* perex */
  --t-body:17px;                             /* text (telefon 16 px, viz zaklad.css) */
  --t-ui:16px;                               /* ovládání, menu */
  --t-tl:17px;                               /* tlačítko */
  --t-cap:15px;                              /* popisky, drobky, placeholder */
  --t-meta:14px;                             /* meta, Kč pod kredity (nikdy menší pro informaci) */
  --t-stitek:13px;                           /* samolepky (max 4 slova) */
  --t-micro:12px;                            /* jen nadpisy sloupců patičky a razítko, VERZÁLKY */
  /* Playfair Display: rovně 800 (nadpisy) a 700 (karty), kurzíva 700; těžké řezy drží nadpisy u loga z videí.
     (Nápis loga je písmo New York od Applu, které se na web vkládat nesmí; je proto převedený na křivky.) */
  --w-titul:800; --w-titul-kurziva:700; --w-karta:700;
  /* Figtree nikdy nad 700 */
  --w-text:500; --w-ui:600; --w-tl:650; --w-stitek:700;
  --lh-titul:1.04; --lh-h2:1.08; --lh-h3:1.18; --lh-text:1.6; --lh-lead:1.55; --lh-ui:1.2;

  /* ── MEZERY: stupnice kostry --s1 … --s9 platí beze změny ────────────
     --s1:4px --s2:8px --s3:12px --s4:16px --s5:24px --s6:32px --s7:48px
     --s8:64px --s9:96px (definované ve style.css). V gap/margin/padding
     nesmí být syrová px hodnota mimo tuhle stupnici, výjimky: rozměry
     předmětů (arch, polaroid, páska) a optické dorovnání ±1–3 px. */
  --sekce:clamp(64px,7vw,112px);       /* svislý rytmus sekcí */
  --okraj:clamp(16px,2.8vw,48px);      /* boční okraj obsahu (telefon 16 px) */
  --sirka:1376px;                      /* max šířka .km-wrap vč. okrajů */

  /* ── POLOMĚRY: papír je papír, ovládání je ovládání ─────────────────── */
  --r-papir:2px;        /* arch, polaroid, album, lístek, obrázek v kartě: řezaný papír */
  --r-list:30px;        /* barevné papíry a čisté listy: bannery, plátno, karty, nádoby, panel Bezpečí, lednička (od 6. 10. 2026 výrazně zaoblené, na telefonu 22 px) */
  --r-mala:16px;        /* malé plochy a náhledy uvnitř: poznámky, lístečky, miniatury */
  --r-magnetka:10px;    /* magnetka zakulacená nůžkami */
  --r-ovladani:14px;    /* pole, varianta, záložky, našeptávač, pole pro nahrání, hláška */
  --r-okno:20px;        /* okno, zásuvka, spodní list: jsou nad stolem, ne na něm */
  --r-pill:999px;       /* tlačítko, samolepka, pilulka */
  /* mosty pro komponenty (jiné hodnoty než těchto šest nejsou): */
  --r-banner:var(--r-list); --r-panel:var(--r-list); --r-karta:var(--r-list);
  --r-jamka:var(--r-papir); --r-pole:var(--r-ovladani); --r-varianta:var(--r-ovladani);

  /* ── ROZMĚRY OVLÁDÁNÍ ─────────────────────────────────────────────── */
  --cil:48px;           /* minimální dotykový cíl */
  --pruh-h:48px;        /* běžící pruh (telefon 40 px), bez zubů a bez vzoru */
  --lista-h:84px;       /* řádek lišty (telefon 56 px) */
  --kat-h:54px;         /* řádek kategorií (telefon 48 px) */
  --palec-h:76px;       /* lišta palce na telefonu (bez safe-area) */

  /* ── POHYB: délky (04, kap. 3.1) ──────────────────────────────────── */
  --d-stisk:90ms; --d-rychle:160ms; --d-kratce:240ms; --d-stred:380ms;
  --d-dlouze:620ms; --d-pribeh:950ms; --d-oslava:1600ms; --d-dech:10s;
  --d-kryt:220ms; --d-kryt-dlouhe:420ms;
  --d-odhal:480ms; --d-odhal-pohyb:820ms; --odhal-krivka:cubic-bezier(.22,1,.36,1);   /* objevování: rychlý rozjezd, dlouhé měkké dosednutí; majitel 6. 10. 2026 (brzo → zpožděné → doladěno podle měření) */
  /* ── POHYB: křivky (první tři shodné s kostrou) ───────────────────── */
  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-prichod:cubic-bezier(.16,1,.3,1);
  --ease-kryt:cubic-bezier(.33,.9,.4,1);
  --ease-odjezd:cubic-bezier(.55,0,1,.45);
  --ease-stisk:cubic-bezier(.2,0,0,1);
  --ease-dech:cubic-bezier(.37,0,.63,1);
  --ease-gravitace:cubic-bezier(.11,0,.5,0);
  --ease-kresba:cubic-bezier(.45,.05,.25,1);
  /* ── POHYB: pružiny, záloha pro prohlížeče bez linear() ───────────── */
  --pruzina-mekka:var(--ease-prichod);
  --pruzina-hrava:cubic-bezier(.34,1.56,.64,1);
  --pruzina-skok:cubic-bezier(.34,1.8,.64,1);
  --pruzina-magnet:cubic-bezier(.3,1.3,.5,1);
  --pruzina-houpak:cubic-bezier(.34,1.56,.64,1);
  --pruzina:var(--pruzina-hrava);
  --pruzina-mekka-doba:640ms; --pruzina-hrava-doba:730ms; --pruzina-skok-doba:860ms;
  --pruzina-magnet-doba:370ms; --pruzina-houpak-doba:1640ms;
  /* ── POHYB: vzdálenosti a kaskády ─────────────────────────────────── */
  --posun-nastup:16px; --posun-zdvih:6px; --kaskada:60ms; --kaskada-drobna:25ms;

  /* ── Z-INDEXY (jediné povolené hodnoty) ───────────────────────────── */
  --z-pod:-1;          /* stín a podklad uvnitř předmětu */
  --z-predmet:1;       /* předměty na stole */
  --z-ozdoba:2;        /* páska, samolepka přes předmět */
  --z-text:3;          /* text nad scénou banneru */
  --z-lepici:20;       /* lepivá galerie detailu, lepivý bok účtu */
  --z-lista:100;       /* #hlavicka (kostra) */
  --z-panel:110;       /* panel kategorií, našeptávač */
  --z-palec:120;       /* lišta palce, plovoucí tlačítko úvodu */
  --z-toast:300;       /* hláška */
  --z-let:600;         /* letící kopie (pohyb.let), hobliny */
  /* <dialog> leží v top layer, z-index nepotřebuje */

  color-scheme:light;
}
@media (max-width:640px){:root{--pruh-h:40px;--lista-h:56px;--kat-h:48px}}

/* Pružiny spočítané z fyziky (04, kap. 3.3). Prohlížeče s linear() je dostanou přesně. */
@supports (transition-timing-function:linear(0, 1)){
  :root{
    --pruzina-mekka:linear(0, .005 1.2%, .019 2.5%, .045 4.0%, .085 5.8%, .160 8.5%, .453 18.2%, .545 21.8%, .626 25.2%, .695 28.7%, .753 32.2%, .805 36.0%, .847 39.8%, .886 44.2%, .919 49.2%, .944 54.8%, .964 61.0%, .987 75.5%, 1);
    --pruzina-hrava:linear(0, .007 1.2%, .033 2.8%, .073 4.2%, .126 5.8%, .255 8.8%, .533 14.5%, .648 17.0%, .762 19.8%, .851 22.2%, .925 24.8%, .985 27.3%, 1.030 29.8%, 1.064 32.5%, 1.091 36.5%, 1.096 41.0%, 1.082 46.2%, 1.020 60.5%, .998 68.8%, .991 80.2%, 1);
    --pruzina-skok:linear(0, .011 1.0%, .041 2.0%, .088 3.0%, .166 4.2%, .321 6.2%, .675 10.2%, .800 11.8%, .932 13.5%, 1.028 15.0%, 1.107 16.5%, 1.168 18.0%, 1.211 19.5%, 1.241 21.2%, 1.249 23.5%, 1.231 25.8%, 1.189 28.2%, 1.060 34.2%, 1.004 37.2%, .962 40.5%, .941 44.0%, .943 48.8%, .998 60.0%, 1.014 66.2%, 1.014 71.8%, .997 88.0%, 1);
    --pruzina-magnet:linear(0, .006 1.5%, .027 3.2%, .060 5.0%, .108 7.0%, .212 10.5%, .566 21.2%, .667 24.8%, .748 28.0%, .813 31.0%, .872 34.2%, .920 37.5%, .957 40.8%, .989 44.5%, 1.011 48.5%, 1.026 52.8%, 1.033 57.8%, 1.032 66.2%, 1);
    --pruzina-houpak:linear(0, .009 0.8%, .046 1.8%, .107 2.8%, .190 3.8%, .262 4.5%, .368 5.5%, .745 8.8%, .883 10.0%, 1.031 11.5%, 1.135 12.8%, 1.219 14.0%, 1.282 15.2%, 1.323 16.5%, 1.343 17.8%, 1.347 18.5%, 1.341 19.5%, 1.309 21.2%, 1.247 23.2%, 1.050 28.2%, .974 30.5%, .935 32.0%, .910 33.2%, .893 34.5%, .882 36.0%, .881 37.8%, .893 39.8%, 1.009 49.0%, 1.031 51.7%, 1.041 54.2%, 1.037 58.2%, .998 67.2%, .986 72.2%, 1.004 89.8%, 1);
  }
}

/* Sytější pastely pro displeje P3 (iPhony, Macy). Akce, inkoust a stavy záměrně ne. */
@supports (color:oklch(0% 0 0)){
  @media (color-gamut:p3){
    :root{
      --p-neb:oklch(86.6% 0.081 237); --p-lev:oklch(84.9% 0.093 298); --p-ruz:oklch(86.6% 0.096 354);
      --s-mas:oklch(88.1% 0.182 98);  --s-neb:oklch(76.0% 0.132 240); --s-ruz:oklch(73.1% 0.201 354);
      --s-lev:oklch(70.1% 0.168 298); --s-mat:oklch(79.9% 0.158 170); --s-pis:oklch(82.9% 0.173 138);
    }
  }
}

/* Barva produktu jako lokální proměnná: komponenta zná jen --pp (povrch),
   --pt (tón), --ps (pastelka), --pn (soused v akvarelu), --zvyraz. */
[data-produkt="omalovanky"]{--pp:var(--p-mas);--pt:var(--t-mas);--ps:var(--s-mas);--pn:var(--s-mat);--zvyraz:var(--s-lev)}
[data-produkt="animak"]    {--pp:var(--p-neb);--pt:var(--t-neb);--ps:var(--s-neb);--pn:var(--s-lev);--zvyraz:var(--s-mas)}
[data-produkt="kolorovani"]{--pp:var(--p-ruz);--pt:var(--t-ruz);--ps:var(--s-ruz);--pn:var(--s-lev);--zvyraz:var(--s-lev)}
[data-tema="kouzlo"]       {--pp:var(--p-lev);--pt:var(--t-lev);--ps:var(--s-lev);--pn:var(--s-ruz);--zvyraz:var(--s-mat)}
[data-tema="bezpeci"]      {--pp:var(--p-mat);--pt:var(--t-mat);--ps:var(--s-mat);--pn:var(--s-neb);--zvyraz:var(--s-lev)}

/* ═══ PÍSMO (SPEC 2.2) ═══════════════════════════════════════════════════
   Náhradní písma s metrikami přepsanými na Fraunces a Figtree: výměna písma neposune
   rozvržení ani nezmění zalomení H1. Hodnoty spočítal scripts/metriky-pisem.py
   (fontTools) z woff2 staženého podle <link> v casti/hlava.html, 25. 9. 2026.
   Šířka je průměr znaků vážený českým textem webu. Fraunces rovně je zafixovaný
   na opsz 144 a wght 600 (H1 úvodu, kandidát LCP; na zalomení H1 záleží nejvíc).
   NAVÍC (V1) oproti SPEC: kurzíva a tučný řez mají vlastní náhradu (Georgia Italic,
   Arial Bold). Při font-synthesis:none by jinak „omalovánka“ v H1 stála do načtení
   rovně a tlačítka by měla řez 400, tedy jinou šířku a jiné zalomení. */
@font-face{font-family:'Fraunces-nahrada';src:local('Georgia');size-adjust:89.51%;ascent-override:109.26%;descent-override:28.49%;line-gap-override:0%}
@font-face{font-family:'Fraunces-nahrada';font-style:italic;src:local('Georgia Italic'),local('Georgia-Italic');size-adjust:84.42%;ascent-override:115.85%;descent-override:30.21%;line-gap-override:0%}
@font-face{font-family:'Figtree-nahrada';font-weight:100 549;src:local('Arial'),local('Helvetica');size-adjust:100.31%;ascent-override:94.71%;descent-override:24.92%;line-gap-override:0%}
@font-face{font-family:'Figtree-nahrada';font-weight:550 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold');size-adjust:95.82%;ascent-override:99.15%;descent-override:26.09%;line-gap-override:0%}

html{font-family:var(--f-ui);background:var(--papir)}
body{font:var(--w-text) var(--t-body)/var(--lh-text) var(--f-ui);color:var(--ink);
  background:var(--papir);font-synthesis:none;-webkit-font-smoothing:antialiased}
@media (max-width:640px){body{font-size:16px}}
.km-titul{font-family:var(--f-titul);font-weight:var(--w-titul);color:var(--ink);letter-spacing:-.02em;
  line-height:var(--lh-titul);text-wrap:balance;font-optical-sizing:auto}
.km-titul em{font-style:italic;font-weight:var(--w-titul-kurziva)}          /* kurzíva má WONK 1 ze souboru */
.km-t-h1-uvod{font-size:var(--t-h1-uvod);line-height:1;letter-spacing:-.025em;font-variation-settings:"opsz" 144}
.km-t-h1-uvod em{display:block;width:fit-content}                           /* fit-content drží čmáranici na šířce slova */
.km-t-h1-uvod > span{display:block}
.km-t-h1{font-size:var(--t-h1);line-height:1.04;letter-spacing:-.022em}
.km-t-h2{font-size:var(--t-h2);line-height:var(--lh-h2)}
.km-t-h2-uzitek{font-size:var(--t-h2-uzitek);line-height:1.12;letter-spacing:-.012em}
.km-t-banner{font-size:var(--t-banner);line-height:1.08}
.km-t-h3{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:-.01em;font-weight:var(--w-karta)}
.km-t-karta{font-size:var(--t-karta);line-height:1.22;letter-spacing:-.005em;font-weight:var(--w-karta)}
.km-t-lead{font:var(--w-text) var(--t-lead)/var(--lh-lead) var(--f-ui)}
.km-t-meta{font:500 var(--t-meta)/1.45 var(--f-ui);color:var(--ink-dim)}
.km-t-micro{font:700 var(--t-micro)/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase}
/* Figtree má ve výchozím stavu proporcionální číslice: tabulkové jen tam, kde se čísla řadí pod sebe nebo mění */
/* rovné číslice všude: Playfair Display má výchozí „staré“ číslice různé výšky (1 jako malé písmeno, 3 a 4 pod řádkem) */
html{font-variant-numeric:lining-nums}
.km-cislo,.km-visacka,.km-kredity b,.km-nadoba-cena,.km-varianta-cena,.km-uctenka,.km-planovac-pocet{font-variant-numeric:lining-nums tabular-nums}

/* ── ZÁKLAD NAVÍC (V1) ────────────────────────────────────────────────── */
/* [hidden] musí vyhrát nad každým display z komponent: přihlášená nikdy nevidí
   blok pro nepřihlášené a naopak (SPEC 4.3), lísteček čekajícího náhledu je
   do ověření skrytý. Bez !important by .km-ceka{display:grid} hidden přebil. */
[hidden]{display:none!important}
/* Kostra kreslila kolem fokusu druhý prstenec stínem a měnila poloměr. Tokeny SPEC
   mají jen obrys --focus (2.3 pravidlo 8); stín tu vynulujeme dřív, než přijdou
   komponenty, takže tlačítka si svou spodní hranu při fokusu nechají. */
:focus-visible{box-shadow:none}
::selection{background:var(--p-lev);color:var(--ink)}   /* výběr textu levandulí: fialová plocha s bílým textem byla jediné místo, kde kouzlo nese text */

/* ═══ STŮL A MŘÍŽKA (SPEC 3.1) ═══ */
.km-wrap{width:100%;max-width:var(--sirka);margin-inline:auto;padding-inline:var(--okraj)}
.km-sek{padding-block:var(--sekce)}
.km-sek--tesne{padding-block:var(--s7)}
.km-sek--uzitek{padding-block:var(--s8)}          /* užitkové sekce (Mohlo by Vás zajímat, Časté dotazy): stránka dýchá ve dvou tempech */
.km-sek--plna{padding-inline:0}                    /* sekce přes celou šířku okna (jen nástěnka Máma mámě), obsah v .km-wrap */
.km-sek-hlava{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s6)}
.km-sek-hlava--stred{flex-direction:column;align-items:center;text-align:center}
.km-sek-hlava .km-t-lead{max-width:36em;color:var(--ink-dim);margin-top:var(--s3)}
.km-mriz > *,.km-flex > *{min-width:0}              /* nelámavé prvky nesmí roztáhnout stránku */
img,svg,video{display:block;max-width:100%}

/* ═══ MATERIÁLY (SPEC 3.2) ═══ */
/* stůl a papíry */
.km-papir{background:var(--papir)}
.km-papir-2{background:var(--zrno),var(--papir-2)}
.km-list{background:var(--list);box-shadow:var(--stin-karta)}          /* čistý list, bez zrna */
.km-kraft{background:var(--vlakna),var(--kraft)}
.km-noc{background:var(--zrno),var(--noc);color:var(--noc-text);--focus:var(--p-lev)}   /* bez září: barvu patičce dá obsah a razítka slibů */
/* barevné papíry (bannery, plátno, panel Bezpečí) leží na stole: výška 1 */
.km-barevny-papir{border-radius:var(--r-list);box-shadow:var(--stin-karta)}

/* akvarel na barevném papíru: pigment se sytí do rohů, střed má plnou chromu povrchu.
   Nikdy --list ani bílá (vyblitá skvrna). Vždy jen sousední odstíny. */
.km-akvarel-mas{background:var(--p-mas);background:
    radial-gradient(60% 80% at 0% 0% in oklch,color-mix(in oklch,var(--s-mas) 45%,transparent),transparent 70%),
    radial-gradient(50% 70% at 100% 100% in oklch,color-mix(in oklch,var(--s-mat) 16%,transparent),transparent 70%),
    var(--zrno),var(--p-mas)}
.km-akvarel-neb{background:var(--p-neb);background:
    radial-gradient(60% 80% at 100% 0% in oklch,color-mix(in oklch,var(--s-lev) 40%,transparent),transparent 72%),
    radial-gradient(55% 70% at 0% 100% in oklch,color-mix(in oklch,var(--s-mat) 34%,transparent),transparent 70%),
    var(--zrno),var(--p-neb)}
.km-akvarel-ruz{background:var(--p-ruz);background:
    radial-gradient(60% 80% at 100% 0% in oklch,color-mix(in oklch,var(--s-lev) 38%,transparent),transparent 72%),
    radial-gradient(55% 70% at 0% 100% in oklch,color-mix(in oklch,var(--s-ruz) 40%,transparent),transparent 70%),
    var(--zrno),var(--p-ruz)}
.km-akvarel-lev{background:var(--p-lev);background:
    radial-gradient(60% 80% at 0% 0% in oklch,color-mix(in oklch,var(--s-ruz) 34%,transparent),transparent 72%),
    radial-gradient(55% 70% at 100% 100% in oklch,color-mix(in oklch,var(--s-neb) 40%,transparent),transparent 70%),
    var(--zrno),var(--p-lev)}
.km-akvarel-mat{background:var(--p-mat);background:
    radial-gradient(60% 80% at 100% 0% in oklch,color-mix(in oklch,var(--s-neb) 30%,transparent),transparent 72%),
    radial-gradient(55% 70% at 0% 100% in oklch,color-mix(in oklch,var(--s-mat) 34%,transparent),transparent 70%),
    var(--zrno),var(--p-mat)}
/* staré fotky na detailu: plná babiččina růže se zrnem, bez pigmentu (tichý svět, R30) */
.km-papir-ruz{background:var(--zrno),var(--p-ruz)}

/* PAUZÁK: podpis značky (kap. 3.3.5). Průsvitnost jen alfou, nikdy backdrop-filter (výkon, Safari). */
.km-pauzak{background:var(--zrno),var(--pauzak);
  box-shadow:0 1px 0 rgb(var(--ink-rgb) / .08),2px 8px 18px -12px rgb(var(--ink-rgb) / .25)}

/* PLSTĚNÁ NÁSTĚNKA Máma mámě: přímo na <section>, přes celou šířku okna */
.km-nastenka{background:var(--plst),var(--p-lev)}

/* duha bez oranžové: jen ukazatel průběhu tvorby */
.km-duha{background:linear-gradient(90deg,var(--s-ruz),var(--s-lev),var(--s-neb),var(--s-mat),var(--s-mas))}
.km-duha{background:linear-gradient(90deg in oklch,var(--s-ruz),var(--s-lev),var(--s-neb),var(--s-mat),var(--s-mas))}

/* zvýrazňovač slova v nadpisu (neprůhledný pruh, nemíchá se s podkladem) */
.km-zvyraz{background:linear-gradient(transparent 62%,var(--zvyraz,var(--s-lev)) 62% 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}

/* ═══ OZDOBY (SPEC 3.3.2) ═══ */
/* WASHI PÁSKA: průsvitná, natržené konce, přesahuje okraj předmětu o 40–60 % své výšky.
   Úhel ±2 až 8°, nikdy 0°. Průsvitná RŮŽOVÁ nikdy přes máslovou ani kraft. */
.km-washi{--w-barva:var(--s-ruz);--w-vzor:repeating-linear-gradient(90deg,rgb(var(--list-rgb) / .42) 0 5px,transparent 5px 11px);--zub:6px;
  display:block;width:var(--w-sirka,120px);height:var(--w-vyska,28px);background:var(--w-vzor),var(--w-barva);
  opacity:.86;rotate:var(--w-uhel,-4deg);box-shadow:var(--stin-paska);
  -webkit-mask:conic-gradient(from 45deg at left,#000 90deg,#0000 0) left/51% var(--zub) repeat-y,conic-gradient(from 225deg at right,#000 90deg,#0000 0) right/51% var(--zub) repeat-y;
          mask:conic-gradient(from 45deg at left,#000 90deg,#0000 0) left/51% var(--zub) repeat-y,conic-gradient(from 225deg at right,#000 90deg,#0000 0) right/51% var(--zub) repeat-y}
/* vzory puntík a kostička jsou zrušené (generický scrapbook); zůstává proužek (výchozí), kanafas a kraft */
.km-washi--kanafas{--w-barva:var(--list);opacity:.92;--w-vzor:
  linear-gradient(90deg,rgb(var(--kanafas,var(--kouzlo-rgb)) / .26) 50%,transparent 0) 0 0/12px 12px,
  linear-gradient(rgb(var(--kanafas,var(--kouzlo-rgb)) / .26) 50%,transparent 0) 0 0/12px 12px}
.km-washi--kraft{--w-barva:var(--kraft-syty);--w-vzor:var(--vlakna);opacity:.92}
.km-washi--mas{--w-barva:var(--s-mas)} .km-washi--neb{--w-barva:var(--s-neb)}
.km-washi--lev{--w-barva:var(--s-lev)} .km-washi--mat{--w-barva:var(--s-mat)}
.km-pripnout{position:absolute;z-index:var(--z-ozdoba);pointer-events:none}

/* SAMOLEPKA (štítek): plná pastelka, bílý výsek 2,5 px, pootočení −3°. Max 4 slova, bez tečky. */
.km-samolepka{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 6px;border-radius:var(--r-pill);
  font:var(--w-stitek) var(--t-stitek)/1.1 var(--f-ui);letter-spacing:.01em;color:var(--ink);background:var(--s-mas);
  box-shadow:0 0 0 2.5px var(--list),var(--stin-samolepka);rotate:var(--uhel,-3deg);white-space:nowrap}
.km-samolepka svg{width:14px;height:14px;fill:currentColor}
.km-samolepka--list{background:var(--list)}
.km-samolepka--mat{background:var(--s-mat)}
.km-samolepka--neb{background:var(--s-neb)}
.km-samolepka--lev{background:var(--p-lev)}
.km-samolepka--ruz{background:var(--p-ruz)}
.km-samolepka--ink{background:var(--ink);color:var(--s-mas)}                 /* „Jen do 6. 12.“ */
.km-samolepka--ai{background:var(--t-lev);color:var(--kouzlo);rotate:0deg}   /* „Vytvořeno s AI“ */

/* VISAČKA CENY: kraft, dírka, zkosená špička. Stojí rovně: cena se čte (řemeslo nese tvar, ne náklon).
   white-space:nowrap je nutné (telefon). */
.km-visacka{position:relative;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 26px;
  background:var(--vlakna),var(--kraft);color:var(--ink);font:700 17px/1 var(--f-ui);rotate:var(--uhel,0deg);
  clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);filter:drop-shadow(1px 2px 2px rgb(var(--ink-rgb) / .18))}
.km-visacka::before{content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:var(--papir-2);box-shadow:inset 0 1px 1px rgb(var(--ink-rgb) / .35)}
.km-visacka small{font:550 var(--t-meta)/1 var(--f-ui);color:var(--ink-dim)}

/* RAZÍTKO: fialový razítkový inkoust, nepravidelné krytí maskou ze šumu. Jediný text ve VERZÁLKÁCH. */
.km-razitko{display:inline-block;padding:6px 14px;border:3px solid currentColor;border-radius:10px;color:var(--kouzlo);
  font:700 15px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;rotate:var(--uhel,-8deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E")}
.km-noc .km-razitko{color:var(--p-lev)}

/* ČMÁRANICE: SVG s pathLength="1" uvnitř <em> nadpisu, roste s písmem, kreslí se JEDNOU. */
.km-cmar{position:absolute;pointer-events:none;overflow:visible;fill:none;stroke:var(--barva,var(--ink));
  stroke-width:var(--tl,2.6);stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0}          /* obě vlastnosti se dědí i do <use> ze sprite */
/* nadpis úvodu (bez data-odhal): třída .km-kresli přímo v HTML, kreslí se od prvního vykreslení */
html.nastup .km-kresli .km-cmar{animation:km-kresli .9s var(--ease-kresba) both;animation-delay:var(--d,60ms)}
/* ostatní nadpisy: kreslí se, až jejich [data-odhal] dostane .V */
html.nastup [data-odhal]:not(.V) .km-cmar{stroke-dashoffset:1}
html.nastup [data-odhal].V .km-cmar{animation:km-kresli .9s var(--ease-kresba) both;animation-delay:var(--d,.3s)}
@keyframes km-kresli{from{stroke-dashoffset:1}}

/* STEHY: bezpečné místo. %238C798F = --pole-linka, %236932BB = --kouzlo (v data: URI nejde proměnná).
   rx 6 = --r-ovladani − inset 8 px. Běžící varianta je SMIL <animate>: CSS přepisy pohybu na ni nepůsobí,
   proto má klidná úroveň vlastní statickou variantu --steh-klid (kap. 6.2). */
.km-steh{position:relative;--steh-klid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='%236932BB' stroke-width='3' stroke-dasharray='2 10' stroke-linecap='round'/%3E%3C/svg%3E")}
.km-steh::after{content:"";position:absolute;inset:8px;border-radius:calc(var(--r-ovladani) - 8px);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='%238C798F' stroke-width='3' stroke-dasharray='2 10' stroke-linecap='round'/%3E%3C/svg%3E")}
.km-steh.je-nad::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='%236932BB' stroke-width='3' stroke-dasharray='2 10' stroke-linecap='round'%3E%3Canimate attributeName='stroke-dashoffset' from='0' to='-24' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E")}

/* TRHANÝ OKRAJ: jen spodek krycího papíru výsledku (papír se tam opravdu trhá). Patička je rovná. */
.km-natrzeno-dole{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 17px) no-repeat,var(--natrzeno) bottom/360px 18px repeat-x;
                          mask:linear-gradient(#000 0 0) top/100% calc(100% - 17px) no-repeat,var(--natrzeno) bottom/360px 18px repeat-x}

/* ZOUBKY: účtenka (.km-entle, nahoře zrcadleně) a stará fotka dokola (.km-zoubky, Safari: source-in). Pruh zoubky nemá. */
.km-entle{--z:5px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%;
                          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%}
.km-zoubky{--z:4px;
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/calc(2*var(--z)) 100% repeat-x,
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/calc(2*var(--z)) 100% repeat-x,
    conic-gradient(from 45deg at left,#0000,#000 1deg 89deg,#0000 90deg) 0 50%/100% calc(2*var(--z)) repeat-y,
    conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) 100% 50%/100% calc(2*var(--z)) repeat-y;
  -webkit-mask-composite:source-in;
  mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/calc(2*var(--z)) 100% repeat-x,
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/calc(2*var(--z)) 100% repeat-x,
    conic-gradient(from 45deg at left,#0000,#000 1deg 89deg,#0000 90deg) 0 50%/100% calc(2*var(--z)) repeat-y,
    conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) 100% 50%/100% calc(2*var(--z)) repeat-y;
  mask-composite:intersect}
.km-fotorozky{position:relative}                   /* jen fotka v albu */
.km-fotorozky::after{content:"";position:absolute;inset:-5px;pointer-events:none;background:
    linear-gradient(135deg,var(--ink) 50%,#0000 50.5%) 0 0/28px 28px no-repeat,
    linear-gradient(225deg,var(--ink) 50%,#0000 50.5%) 100% 0/28px 28px no-repeat,
    linear-gradient(45deg,var(--ink) 50%,#0000 50.5%) 0 100%/28px 28px no-repeat,
    linear-gradient(315deg,var(--ink) 50%,#0000 50.5%) 100% 100%/28px 28px no-repeat;
  filter:drop-shadow(0 1px 1px rgb(var(--ink-rgb) / .25))}

/* ═══ RUKOPIS = LETTERING (SPEC 3.3.4) ═══ */
.km-ruka{display:inline-flex;align-items:center;color:var(--ink);line-height:1}
.km-ruka svg{height:1.1em;width:auto;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.km-ruka svg [data-zastupka] path{fill:currentColor;stroke:none}   /* zástupka z Caveatu jsou obrysy, ne tahy */
.km-noc .km-ruka{color:var(--p-ruz)}

/* ═══ PŘEDMĚTY NA STOLE (SPEC 3.4) ═══ */
.km-polaroid{position:relative;background:linear-gradient(172deg,var(--list),#F1EEF8);  /* #F1EEF8 = stín spodní vrstvy filmu */
  box-shadow:var(--stin-zvednuta);rotate:var(--uhel,3deg);margin:0}
.km-polaroid-in{padding:5.2% 5.2% 24%}          /* procenta ze šířky polaroidu, proto vnitřní obal */
.km-polaroid img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--papir-2)}
.km-polaroid figcaption{position:absolute;left:0;right:0;bottom:5%;display:flex;justify-content:center;
  font:var(--w-titul) 19px/1 var(--f-titul);color:var(--ink)}          /* názvy (Nápady z dílny) rovně Fraunces */
.km-polaroid figcaption .km-ruka{font-size:22px}                      /* „Vaše fotka“, „Váš náhled“: lettering */
.km-arch{position:relative;aspect-ratio:210/297;background:var(--list);box-shadow:var(--stin-zvednuta);
  rotate:var(--uhel,1.5deg);padding:7.5%;border-radius:var(--r-papir)}
.km-arch > img,.km-arch > svg{width:100%;height:100%;object-fit:contain}
/* Magnetka z magnetického papíru: tenký tisk, bílý okraj po stříhání, rohy zakulacené nůžkami, matná.
   Web prodává obrázek k tisku, ne hotovou plastovou magnetku: předmět nesmí slibovat výrobek. */
.km-magnetka{position:relative;aspect-ratio:1;border-radius:var(--r-magnetka);overflow:hidden;background:var(--list);
  rotate:var(--uhel,4deg);box-shadow:0 0 0 4px var(--list),1px 2px 0 4px #DCD2DE,var(--stin-samolepka)}  /* #DCD2DE = hrana papíru 0,5 mm */
.km-magnetka img{width:100%;height:100%;object-fit:cover}
/* žádný ::after (lesk plastu je pryč; pseudoprvek by se navíc srazil se štítkem ukázky) */
.km-album{position:relative;padding:12px 12px 36px;background:var(--list);box-shadow:var(--stin-zvednuta);rotate:var(--uhel,-4deg)}
.km-album-foto{position:relative;width:100%;aspect-ratio:4/3}           /* + .km-zoubky + .km-fotorozky */
.km-album-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.km-album figcaption{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;font-size:20px} /* obsah: .km-ruka r-svatba */
.km-listek{position:relative;padding:22px 20px 24px 50px;box-shadow:var(--stin-karta);rotate:var(--uhel,-1deg);border-radius:var(--r-papir);
  background:linear-gradient(90deg,#0000 36px,rgb(var(--s-ruz-rgb) / .55) 36px 37.5px,#0000 37.5px),
             repeating-linear-gradient(#0000 0 23px,rgb(var(--s-neb-rgb) / .35) 23px 24px),var(--list);
  background-position:0 0,0 22px}                                                   /* linky odsazené tak, aby účaří sedělo na lince */
.km-listek .km-listek-nadpis{font:var(--w-titul) 19px/24px var(--f-titul);letter-spacing:-.01em}  /* první věta tipu */
.km-listek .km-listek-text{font:500 16px/24px var(--f-ui);color:var(--ink)}        /* řádkování = řádek sešitu 24 px */
.km-listek .km-listek-puvod{margin-top:var(--s3);font:600 13px/1.3 var(--f-ui);color:var(--ink-dim)}
.km-spendlik{position:absolute;top:-8px;left:50%;width:18px;height:18px;border-radius:50%;translate:-50% 0;z-index:var(--z-ozdoba);
  background:var(--s-ruz);box-shadow:inset -2px -2px 0 color-mix(in oklch,var(--s-ruz),var(--ink) 22%),1px 3px 3px rgb(var(--ink-rgb) / .3)}  /* matná hlavička, bez lesku */
.km-ilustracni{position:absolute;right:8px;bottom:8px;z-index:var(--z-ozdoba);padding:3px 8px;border-radius:var(--r-pill);
  background:rgb(var(--list-rgb) / .92);color:var(--ink-dim);font:550 var(--t-meta)/1.2 var(--f-ui);pointer-events:none;white-space:nowrap}
.km-ikona-riso{flex:none;width:44px;height:44px}
.km-ikona-riso svg{width:100%;height:100%;overflow:visible;stroke-linecap:round;stroke-linejoin:round}
.km-ikona-riso .km-vypln{fill:var(--ps,var(--s-mas));stroke:none;translate:2.5px 2.5px}
.km-ikona-riso .km-obrys{fill:none;stroke:var(--ink);stroke-width:1.9}

/* ═══ TLAČÍTKA A ODKAZY (SPEC 3.5) ═══ */
.km-tl{--bg:var(--akce);--hrana:var(--akce-a);--txt:var(--na-akci);--zare:var(--zare-akce);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:10px 28px;
  border:0;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;
  white-space:normal;text-wrap:balance;text-align:center;              /* na 360 px nejvýš dva řádky, nikdy přetečení */
  background:var(--bg);color:var(--txt);font:var(--w-tl) var(--t-tl)/1.15 var(--f-ui);letter-spacing:.005em;
  box-shadow:inset 0 -2px 0 var(--hrana),var(--zare);
  transition:translate var(--d-rychle) var(--ease-stisk),background-color var(--d-rychle) var(--ease)}
/* tlačítka bez šipek (majitel 6. 10. 2026 večer: „bez těch šipek, i na počítači“); šipka zůstává jen v HTML, kde ji nic nezobrazí */
.km-tl > svg:has(> use[href="#i-sipka"]){display:none}
.km-tl svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:translate var(--d-kratce) var(--pruzina-magnet)}
@media (hover:hover) and (pointer:fine){
  .km-tl:hover{--bg:var(--akce-h);translate:0 -1px}
  .km-tl:hover svg{translate:3px 0}
  .km-tl--inkoust:hover{--bg:var(--akce);--hrana:var(--akce-a)}
  .km-tl--list:hover{--bg:var(--t-lev)}}
.km-tl:active{--bg:var(--akce-a);translate:0 1px;box-shadow:inset 0 1px 0 var(--akce-a);transition-duration:var(--d-stisk)}
.km-tl--inkoust{--bg:var(--ink);--hrana:var(--ink-hrana);--zare:var(--zare-inkoust)}
.km-tl--inkoust:active{--bg:var(--ink-hrana);box-shadow:none}
.km-tl--list{--bg:var(--list);--txt:var(--ink);--hrana:var(--ink);--zare:1px 8px 16px -12px rgb(var(--ink-rgb) / .25);
  box-shadow:inset 0 0 0 2px var(--ink),inset 0 -2px 0 var(--ink),var(--zare)}
.km-tl--list:active{--bg:var(--t-lev);box-shadow:inset 0 0 0 2px var(--ink)}
.km-tl--maly{min-height:var(--cil);padding:0 20px;font-size:15px;white-space:nowrap}
.km-tl--siroky{width:100%;min-height:62px;font-size:18px}
.km-tl[aria-disabled="true"],.km-tl:disabled{--bg:var(--t-ruz);--txt:var(--ink-dim);box-shadow:none;cursor:not-allowed;translate:none}
.km-tl[aria-busy="true"]{cursor:progress}
.km-tl[aria-busy="true"] svg{animation:km-toc 1s linear infinite}
@keyframes km-toc{to{rotate:360deg}}

.km-sipka{display:grid;place-items:center;flex:none;width:var(--cil);height:var(--cil);border-radius:50%;border:0;cursor:pointer;
  background:var(--ink);color:var(--list);transition:background-color var(--d-rychle) var(--ease),rotate var(--pruzina-magnet-doba) var(--pruzina-magnet)}
.km-sipka svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.km-sipka[aria-disabled="true"]{opacity:.35;cursor:default}

.km-odkaz{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--kouzlo);
  text-decoration-thickness:2px;text-underline-offset:5px}
@media (hover:hover){.km-odkaz:hover{color:var(--kouzlo-h)}}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.km-tl:focus-visible,.km-sipka:focus-visible{outline-offset:4px}
@media (forced-colors:active){.km-tl,.km-sipka{border:2px solid transparent}}

/* ═══ POLE FORMULÁŘE (SPEC 3.6) ═══ */
.km-pole{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.km-pole > label,.km-pole-nazev{font:600 15px/1.2 var(--f-ui);color:var(--ink)}      /* větou, ne VERZÁLKAMI */
.km-pole input,.km-pole textarea{width:100%;min-height:54px;padding:0 18px;border-radius:var(--r-pole);
  border:1.5px solid var(--pole-linka);background:var(--list);color:var(--ink);font:500 16px/1.3 var(--f-ui);
  transition:border-color var(--d-rychle) var(--ease),box-shadow var(--d-rychle) var(--ease)}
.km-pole textarea{min-height:120px;padding:14px 18px;resize:vertical}
.km-pole input::placeholder,.km-pole textarea::placeholder{color:var(--ink-dim);opacity:.8}
.km-pole input:focus,.km-pole textarea:focus{outline:none;border-color:var(--kouzlo);box-shadow:0 0 0 4px rgb(var(--kouzlo-rgb) / .18)}
.km-pole-napoveda{font:500 var(--t-meta)/1.45 var(--f-ui);color:var(--ink-dim)}
.km-pole-chyba{display:flex;gap:6px;align-items:flex-start;font:550 var(--t-meta)/1.4 var(--f-ui);color:var(--chyba)}
.km-pole-chyba svg{flex:none;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}
.km-pole[data-chyba] input{border-color:var(--chyba)}
.km-heslo{position:relative}
.km-heslo button{position:absolute;right:3px;top:3px;width:var(--cil);height:var(--cil);border:0;background:none;border-radius:var(--r-pole);cursor:pointer}
/* zaškrtávátko: celý řádek je cíl 48 px, políčko vizuálně 24 px */
.km-zaskrt{display:flex;gap:var(--s3);align-items:flex-start;min-height:var(--cil);padding-block:var(--s3);cursor:pointer;font:500 15px/1.45 var(--f-ui)}
.km-zaskrt input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--kouzlo)}
.km-noc .km-pole input{background:var(--noc-2);border-color:var(--noc-linka);color:var(--noc-text)}

/* ═══ POHYB: pomocné vrstvy pro js/pohyb.js (V1) ═════════════════════════
   Všechno, co létá přes stránku (kopie náhledu, drobky, hobliny, razítko),
   leží ve vlastní fixní vrstvě s contain:strict: rozvržení stránky o nich
   neví, nic se kvůli nim nepřepočítává a úklid je jedno remove(). */
.km-vrstva-pohybu{position:fixed;inset:0;z-index:var(--z-let);pointer-events:none;contain:strict;overflow:hidden}
.km-let{position:fixed;margin:0;z-index:var(--z-let);pointer-events:none;transform-origin:50% 50%}

/* voskový drobek: nepravidelná kapka, ne kolečko (vosk se neodlupuje do kruhů).
   Tvar se liší jen poloměry rohů, žádný filtr ani obrázek. */
.km-drobek{position:absolute;left:0;top:0;width:var(--v,8px);height:calc(var(--v,8px) * .78);
  margin:calc(var(--v,8px) * -.5) 0 0 calc(var(--v,8px) * -.5);background:var(--b,var(--s-ruz));
  border-radius:48% 52% 44% 56% / 58% 46% 54% 42%;will-change:transform,opacity}
.km-drobek:nth-child(3n){border-radius:62% 38% 55% 45% / 45% 60% 40% 55%}
.km-drobek:nth-child(3n+1){border-radius:40% 60% 60% 40% / 55% 45% 55% 45%}

/* hoblina z ořezané pastelky: spirálka 32 × 20 ze sprite (h-1 až h-3),
   okraj barvou pastelky (currentColor), vnitřek papírově bílý (kap. 3.3.6).
   will-change natrvalo je tu povolené (SPEC 6.4): 56 kusů žije 1,6 s. */
.km-hoblina{position:absolute;left:0;top:0;width:32px;height:20px;margin:-10px 0 0 -16px;
  color:var(--b,var(--s-ruz));backface-visibility:visible;will-change:transform,opacity;overflow:visible}

/* razítko nalepené skriptem (VF.pohyb.razitko) do pravého horního rohu předmětu */
.km-razitko--roh{position:absolute;top:10px;right:10px;z-index:var(--z-ozdoba);pointer-events:none}

/* lettering, který se bude „psát“ (VF.pohyb.pis): vlastník stránky mu dá data-pis
   a do zavolání pis() je tah schovaný. Jen při html.nastup: bez JS nebo v klidné
   úrovni je vidět hned celý (pojistka v hlava.html třídu nastup po 3 s odebere). */
html.nastup [data-ruka][data-pis]:not(.je-napsano) svg{clip-path:inset(0 100% 0 0)}

/* ═══ SAMOVOLNÉ SMYČKY (SPEC 6.2) ═════════════════════════════════════════
   Pruh, dech pole a podobně: stojí mimo obraz, usnou 5 s po posledním podnětu
   a pod otevřeným oknem. Výjimka data-smycka="trvala" (tvorba): neusíná, jen
   stojí mimo obraz; usnutí by vypadalo jako zamrzlá tvorba. */
[data-smycky].mimo [data-smycka],
html.smycky-spi [data-smycka]:not([data-smycka="trvala"]),
html.km-okno-otevreno [data-smycka]{animation-play-state:paused}
html[data-pohyb="klidna"] [data-smycka]{animation:none!important}

/* ═══ TISK (VF.tisk, SPEC 8.4 a 4.2.7) ═══════════════════════════════════
   Tiskne se jen vložený <div class="km-tisk">, zbytek stránky se schová.
   Žádný skrytý <iframe>: Safari na iPhonu z něj tiskne celou stránku nebo nic.
   Rozměry v milimetrech, protože tiskárna počítá v milimetrech (A4 210 × 297).
   @page doplňuje skript podle rozvržení (přání potřebují okraj 0). */
@media screen{.km-tisk{display:none!important}}
@media print{
  html,body{background:none!important}           /* krém a zrno stolu na papír nepatří: tiskne se na bílý papír */
  body > :not(.km-tisk){display:none!important}
  .km-tisk{display:block;color:var(--ink);font:500 11pt/1.3 var(--f-ui)}
  .km-tisk img{display:block;width:100%;height:100%;object-fit:contain}
  .km-tisk-list{display:flex;flex-direction:column;align-items:center;justify-content:center;width:190mm;height:276mm;margin:0 auto;break-inside:avoid}
  .km-tisk-list .km-tisk-obr{flex:1;min-height:0;width:100%}
  .km-tisk-radek{display:flex;gap:10mm;justify-content:center;width:100%;padding-top:6mm;font:500 12pt/1 var(--f-ui);color:var(--ink)}
  .km-tisk-mriz{display:grid;justify-content:center;align-content:center;margin:0 auto;break-inside:avoid}
  /* 4 magnetky 9 × 9 cm: čárkované vodítko je přesně na hraně obrázku, stříhá se po něm */
  .km-tisk--magnetky4 .km-tisk-mriz{grid-template-columns:repeat(2,90mm);grid-auto-rows:90mm;gap:8mm;height:276mm}
  .km-tisk--magnetky4 .km-tisk-bunka{outline:.25mm dashed var(--ink-dim);outline-offset:0}
  .km-tisk--magnetky4 img{object-fit:cover}
  /* 4 přání A6 (105 × 148,5 mm) na A4 bez okraje stránky: řezy jsou čárkované hrany buněk */
  .km-tisk--prani4 .km-tisk-mriz{grid-template-columns:repeat(2,105mm);grid-auto-rows:148.5mm;width:210mm;height:297mm}
  .km-tisk--prani4 .km-tisk-bunka{display:flex;flex-direction:column;padding:10mm 10mm 8mm;
    border-right:.25mm dashed var(--ink-dim);border-bottom:.25mm dashed var(--ink-dim)}
  .km-tisk--prani4 .km-tisk-bunka:nth-child(2n){border-right:0}
  .km-tisk--prani4 .km-tisk-bunka:nth-child(n+3){border-bottom:0}
  .km-tisk--prani4 .km-tisk-obr{flex:1;min-height:0}
  .km-tisk-venovani{min-height:14mm;padding-top:4mm;border-bottom:.25mm solid var(--pole-linka);
    font:italic var(--w-titul-kurziva) 15pt/1.2 var(--f-titul);text-align:center;color:var(--ink)}
  /* 12 kartiček na pexeso 5 × 5 cm: mřížka 3 × 4 se společnými řeznými hranami */
  .km-tisk--karticky12 .km-tisk-mriz{grid-template-columns:repeat(3,50mm);grid-auto-rows:50mm;height:276mm}
  .km-tisk--karticky12 .km-tisk-bunka{padding:2.5mm;outline:.25mm dashed var(--ink-dim);outline-offset:-.125mm}
  .km-tisk--karticky12 img{object-fit:cover}
}

/* ═══ KLIDNÁ ÚROVEŇ POHYBU (SPEC 6.2) ═══ */
html[data-pohyb="klidna"] *,html[data-pohyb="klidna"] *::before,html[data-pohyb="klidna"] *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important;scroll-behavior:auto!important}
html[data-pohyb="klidna"] :is([data-prolni]){transition-duration:200ms!important}
/* animace řízené rolováním a SMIL uvnitř data: URI se přepisem délky nezastaví */
html[data-pohyb="klidna"] [data-rolovani],html[data-pohyb="klidna"] .km-steh.je-nad::after{animation:none!important}
html[data-pohyb="klidna"] .km-steh.je-nad::after{background-image:var(--steh-klid)}
/* totéž i bez JS (inline skript v <head> neproběhl) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-prolni]{transition-duration:200ms!important}
  [data-rolovani],.km-steh.je-nad::after{animation:none!important}
  .km-steh.je-nad::after{background-image:var(--steh-klid)}}

/* ═══ ODHALOVÁNÍ PŘEDMĚTŮ (SPEC 6.2, M2) ═══ */
/* jen předměty (kap. 4.0); nástup = přistání papíru: shora a pootočené, rotate se s --uhel skládá */
html.nastup [data-odhal]{opacity:0;transform:translateY(28px) rotate(-.5deg) scale(.988)}      /* zespodu, jako když se obsah zvedá s rolováním */
html.nastup [data-odhal].V{opacity:1;transform:none;transition-property:opacity,transform;
  transition-duration:var(--d-odhal),var(--d-odhal-pohyb);
  transition-timing-function:var(--ease-kryt),var(--odhal-krivka);transition-delay:calc(var(--zpozdeni,0s) + var(--odhal-cekani))}
:root{--odhal-cekani:.04s}  /* skoro žádné čekání: zpoždění (0,4 s i 0,12 s) vypadalo jako zasekávání; „dost brzo“ řeší spouštěcí hranice v motion.js */
html.nastup [data-odhal]:not(.V){will-change:transform,opacity}
html.zevnitr{--odhal-cekani:0s}   /* po příchodu zevnitř webu (motion.js) bez čekání: stránka má být hned k dispozici */
html.zevnitr .pt-hero-list{view-transition-name:none}   /* návrat na úvod: papír se nemorfuje, úvod nastoupí celý jako při prvním příchodu */

/* ═══ PŘECHODY MEZI STRÁNKAMI (SPEC 6.4, M24) ═══ */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* stará stránka se krátce zvedne ze stolu, nová dosedne zespodu; papír s videem z banneru přejede do scény detailu.
   Krátké doby a obyčejné křivky: během přechodu je stará stránka zmražený snímek, dlouhý doběh by vypadal jako zaseknutí.
   Prohlížeč bez přechodů mezi dokumenty (starší Safari, Firefox) jen načte novou stránku a pustí její nástup. */
::view-transition-old(root){animation:km-vt-pryc 200ms var(--ease-odjezd) both}
::view-transition-new(root){animation:km-vt-sem 320ms var(--ease-prichod) both}
@keyframes km-vt-pryc{to{opacity:0;transform:translateY(-10px) scale(.99)}}
@keyframes km-vt-sem{from{opacity:0;transform:translateY(14px) scale(.99)}}
::view-transition-group(*){animation-duration:320ms;animation-timing-function:var(--ease-prichod)}
::view-transition-group(km-portret-list){animation-duration:420ms;animation-timing-function:var(--ease-prichod)}
::view-transition-image-pair(km-portret-list){isolation:isolate}
::view-transition-old(km-portret-list),::view-transition-new(km-portret-list){width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
/* papír s videem: když je jméno na obou stránkách (úvod → detail), putuje jen NOVÝ snímek v plné krytosti a starý se vůbec neukáže.
   Prolínání dvou různých obrazů (rozkreslené video na úvodu × první snímek detailu) během pohybu dělalo dvojitý rám a blikání. */
::view-transition-old(km-portret-list):not(:only-child){display:none}
::view-transition-new(km-portret-list):not(:only-child){animation:none;opacity:1}
/* jen jedna strana (návrat z detailu na úvod): obyčejné rychlé prolnutí */
::view-transition-old(km-portret-list):only-child{animation:km-vt-obraz-pryc 220ms var(--ease-kryt) both}
::view-transition-new(km-portret-list):only-child{animation:km-vt-obraz-sem 320ms var(--ease-kryt) both}
@keyframes km-vt-obraz-pryc{to{opacity:0}}
@keyframes km-vt-obraz-sem{from{opacity:0}}
/* karta → plátno detailu: jméno podle varianty. Na úvodu jméno nesou jen karty karuselu, kolečka a karty
   Na dárek ne (dvě stejná jména na stránce přechod zruší). #hlavicka se nepojmenovává (fixní menu). */
.km-karta-obr,.km-platno{view-transition-name:var(--vt,none)}