[hidden]{ display:none !important; } /* [hidden] musi vzdy vyhrat nad tridami se stejnou specificitou (napr. display:flex) -- jinak se skryte prvky (zprava odeslana, skryte dlazdice...) zobrazi omylem hned po nacteni */
/* =========================================================================
   MF Art — design tokeny a základní reset
   Převzato beze změny z prototypu (Prototyp - Misha Fryc v3 skiny.dc.html,
   řádky 16–98): blok :root, [data-theme="galerie"], [data-theme="noir"],
   kurzory, grain overlay, reset, keyframes, prefers-reduced-motion.
   ========================================================================= */
:root{
  --shadow:#15110C; --sanctuary:#F6F0E3; --power:#FFB411; --illumination:#FFCE00; --mystic:#4B135E;
  --ink:#1C1712; --ink-soft:rgba(28,23,18,.68); --ink-hairline:rgba(28,23,18,.12);
  --paper-soft:rgba(246, 240, 227, .68); --paper-hairline:rgba(246, 240, 227, .14);
  --fg-strong:#FFFFFF; --pick-bg:rgba(246, 240, 227, .06);
  --chrome:rgba(21,17,12,.94); --chrome-solid:rgba(21,17,12,.98); --chrome-toast:rgba(21,17,12,.96);
  --scrim:radial-gradient(60% 60% at 50% 45%,rgba(21,17,12,.2),rgba(21,17,12,.82));
  --welcome-bright:.34; --dim-thumb:.55; --grain:0; --grain-blend:overlay;
  /* Nasviceni zdi -- vineta pres cele okno, kresli ji html::before nize.
     Gradient se sklada z cisel nize, ne z natvrdo napsaneho zapisu: kazdy
     skin prepisuje jen ta cisla a stejna cisla jdou prepsat i z adminu
     (MF Art -> Nasviceni zdi, viz inc/wall.php). Vic barevnych zastavek
     nez dve dela prechod plynuly -- svetlo ubyva po krivce, takze nikde
     neni videt hrana. Kdo tyhle zastavky meni, meni je pro oba skiny. */
  --wall-glow:.12; --wall-reach:84%; --wall-x:50%; --wall-y:38%; --wall-dither:.09;
  --wall-edge-rgb:0 0 0; --wall-edge-top:.42; --wall-edge-bottom:.5; --wall-edge-height:32%;
  /* Nasobitel ztmaveni u okraju. 1 = plne, .5 = polovicni. Meni ho detail
     obrazu (.mf-detail v main.css), aby tam byl stejny gradient jako na
     strance, jen s jemnejsimi kraji. */
  --wall-edge-scale:1;
  --font-display:'Jost',sans-serif; --font-body:'Raleway',sans-serif; --font-title:'Newsreader',Georgia,serif;
  --gold:#FFB411; --gold-hover:#FFCE00; --gold-50:rgba(255,180,17,.5); --ink-fixed:#1C1712; --sold-bg:#8A8377;
  /* Barva fokus ramecku (:focus-visible) -- zvlast od --gold, protoze gold
     nese i barvu tlacitek/branding a ta ma zustat zlata v obou rezimech.
     Zde jen vychozi (tmavy rezim + bez data-theme): zlata jako driv.
     Svetly rezim (galerie) si ji prepisuje na fialovou nize kvuli kontrastu. */
  --focus:var(--gold);
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px; --s-9:128px;
  /* Bocni odsazeni celeho webu -- driv byl tenhle clamp 17x opsany v
     main.css. Do 1600 px se chova presne jako driv (20 px na mobilu, 72 px
     na desktopu). Nad 1600 px zabere druhy clen: obsah se prestane roztahovat
     a zustane vycentrovany ve sloupci siroke --content-max, takze na velkem
     monitoru nelezi rozhozeny po celé sirce. Galerijni scena (.mf-hero) ma
     vlastni, uzsi odsazeni a tohle se ji netyka -- plátno smi byt siroke. */
  --content-max:1600px;
  /* --pad-center je jen to prebytecne misto nad --content-max, tedy 0 az do
     1600 px. Pouziva ho galerie, ktera pod tim zadne odsazeni navic neunese
     (ukrajovalo by primo z platna, viz .mf-gal-body v main.css). */
  --pad-center:max(0px, (100vw - var(--content-max)) / 2);
  --pad-x:max(clamp(20px,5vw,72px), var(--pad-center));
  --t-h1:52px; --t-h2:33px; --t-h3:27px; --t-lead:21px; --t-body:17px; --t-small:14px; --t-label:11.5px;
  --motion-state:180ms ease; --motion-enter:350ms ease; --touch-min:44px; --dim:.6;
  --shadow-canvas:0 5px 9px -3px rgba(0, 0, 0, .82); --drop-canvas:0 5px 8px rgba(0, 0, 0, .75);
  --ph:repeating-linear-gradient(45deg,rgba(246,240,227,.07) 0 8px,rgba(246,240,227,.02) 8px 16px);
  --ph-dark:repeating-linear-gradient(45deg,rgba(28,23,18,.09) 0 8px,rgba(28,23,18,.03) 8px 16px);
}
/* Tuhle sadu tokenu bere i uvitaci clona (.mf-welcome) -- ta ma byt svetla
   vzdy, i kdyz ma navstevnik prepnuto na tmavy rezim. Samotne prepsani
   techto tokenu ale nestaci na vinetu: --wall se sklada z nich az v
   samostatnem pravidle nize, kde je .mf-welcome uvedena taky. */
[data-theme="galerie"], .mf-welcome{
  --shadow:#eae4d7; --sanctuary:#191510; --fg-strong:#000000;
  --power:#191510; --illumination:#3b332a; --mystic:#d8c8e2;
  --ink:#f2ece0; --ink-soft:rgba(242, 236, 224, .72); --ink-hairline:rgba(242, 236, 224, .16);
  --paper-soft:rgba(25, 21, 16, .72); --paper-hairline:rgba(25, 21, 16, .16); /* .60 nemelo dost kontrastu na --shadow (#eae4d7 v tomto skinu) -- 4.36:1 misto pozadovaneho 4.5:1 (Lighthouse a11y audit 22.9.2026). .72 dava 6.4:1. */
  --pick-bg:rgba(25, 21, 16, .06);
  --chrome:rgba(234, 228, 215, .90); --chrome-solid:rgba(234, 228, 215, .98); --chrome-toast:rgba(234, 228, 215, .96);
  --scrim:radial-gradient(58% 58% at 50% 45%, rgba(234, 228, 215, .30), rgba(234, 228, 215, .90));
  --welcome-bright:1.08; --dim:.88; --dim-thumb:.82;
  --shadow-canvas:0 5px 8px -3px rgba(25, 21, 16, .44); --drop-canvas:0 5px 7px rgba(25, 21, 16, .4);
  --wall-glow:.55; --wall-reach:84%; --wall-y:38%; --wall-edge-rgb:42 33 22; --wall-edge-top:.24; --wall-edge-bottom:.26; --wall-edge-height:30%; --wall-dither:.07;
  --t-h1:60px; --t-h2:36px; --t-lead:20px;
  --grain:.05; --grain-blend:multiply;
  --ph:repeating-linear-gradient(45deg, rgba(25, 21, 16, .07) 0 8px, rgba(25, 21, 16, .02) 8px 16px);
  --ph-dark:repeating-linear-gradient(45deg, rgba(242, 236, 224, .10) 0 8px, rgba(242, 236, 224, .03) 8px 16px);
}
[data-theme="noir"]{
  --shadow:#0b0b0c; --sanctuary:#efece5; --fg-strong:#ffffff;
  --power:#e8e2d4; --illumination:#ffffff; --mystic:#5b2140;
  --ink:#111110; --ink-soft:rgba(17, 17, 16, .68); --ink-hairline:rgba(17, 17, 16, .14);
  --paper-soft:rgba(239, 236, 229, .56); --paper-hairline:rgba(239, 236, 229, .16);
  --pick-bg:rgba(239, 236, 229, .06);
  --chrome:rgba(11, 11, 12, .92); --chrome-solid:rgba(11, 11, 12, .98); --chrome-toast:rgba(11, 11, 12, .96);
  --scrim:radial-gradient(58% 58% at 50% 45%, rgba(11, 11, 12, .12), rgba(11, 11, 12, .88));
  --welcome-bright:.3; --dim:.9; --dim-thumb:.9;
  --shadow-canvas:0 6px 10px -3px rgba(0, 0, 0, .9); --drop-canvas:0 6px 9px rgba(0, 0, 0, .85);
  --wall-glow:.14; --wall-reach:86%; --wall-y:36%; --wall-edge-top:.48; --wall-edge-bottom:.54; --wall-edge-height:32%; --wall-dither:.11;
  --t-h1:58px; --t-h2:36px;
  --grain:.055; --grain-blend:overlay;
  --ph:repeating-linear-gradient(45deg, rgba(239, 236, 229, .07) 0 8px, rgba(239, 236, 229, .02) 8px 16px);
}
/* Slozeni vinety je zamerne v pravidle pro vic selektoru, ne jen :root.
   Duvod: var() uvnitr vlastni vlastnosti se dosazuje tam, kde se ta
   vlastnost pocita -- tedy na :root -- a vysledny retezec uz se jen dedi.
   Prepsat dole jen --wall-glow a spol. proto nestaci, gradient by zustal
   podle :root. Kdo potrebuje vlastni variantu (uvitaci clona vzdy svetla,
   detail s jemnejsimi kraji), musi mit --wall deklarovane u sebe. */
:root, .mf-welcome, .mf-detail{
  --wall:
    radial-gradient(var(--wall-reach) calc(var(--wall-reach) * .68) at var(--wall-x) var(--wall-y),
      rgb(255 255 255 / var(--wall-glow)) 0%,
      rgb(255 255 255 / calc(var(--wall-glow) * .68)) 32%,
      rgb(255 255 255 / calc(var(--wall-glow) * .34)) 58%,
      rgb(255 255 255 / calc(var(--wall-glow) * .12)) 80%,
      rgb(255 255 255 / 0) 100%),
    linear-gradient(180deg,
      rgb(var(--wall-edge-rgb) / calc(var(--wall-edge-top) * var(--wall-edge-scale))) 0%,
      rgb(var(--wall-edge-rgb) / calc(calc(var(--wall-edge-top) * var(--wall-edge-scale)) * .52)) calc(var(--wall-edge-height) * .3),
      rgb(var(--wall-edge-rgb) / calc(calc(var(--wall-edge-top) * var(--wall-edge-scale)) * .18)) calc(var(--wall-edge-height) * .62),
      rgb(var(--wall-edge-rgb) / 0) var(--wall-edge-height),
      rgb(var(--wall-edge-rgb) / 0) calc(100% - var(--wall-edge-height)),
      rgb(var(--wall-edge-rgb) / calc(calc(var(--wall-edge-bottom) * var(--wall-edge-scale)) * .18)) calc(100% - var(--wall-edge-height) * .62),
      rgb(var(--wall-edge-rgb) / calc(calc(var(--wall-edge-bottom) * var(--wall-edge-scale)) * .52)) calc(100% - var(--wall-edge-height) * .3),
      rgb(var(--wall-edge-rgb) / calc(var(--wall-edge-bottom) * var(--wall-edge-scale))) 100%);
}
/* "Wall" gradientovy vinet pres cele okno. Drive resene pres
   background-attachment:fixed primo na [data-theme] (html/body) -- na
   mobilnim Chromu je ale tahle vlastnost znama tim, ze pri rychlem
   (flingovem) scrollovani neni compositor schopny fixed pozadi vzdy
   prekreslit vcas, takze se na okamzik objevi mezera bez pozadi (samotna
   barva stranky pod tim je v poradku, jen gradient nad ni na chvili
   zmizi). Reseno pseudo-elementem s position:fixed, ktery na scroll
   vubec nereaguje -- neni na co cekat, takze nemuze vypadnout.
   z-index:-1 ho drzi nad barvou pozadi (ta je na html, zamerne NE na
   body -- viz poznamka u html{background} nize), ale pod vsemi bezne
   umistenymi sekcemi stranky. */
body{position:relative;}
/* Vineta sedi na html::before, zrneni na body::before. Poradi je zamerne:
   oba maji z-index:-1, takze o tom, co lezi nahore, rozhoduje poradi v
   dokumentu -- html::before se kresli driv, zrneni tedy lezi na gradientu
   a rozbiji jeho pruhy. Obracene by zrneni skoncilo pod nim a nedelalo nic.
   Proc se tu nepouziva ::after: ten uz patri zrnu pres cely web
   ([data-theme]::after nize). */
html::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--wall); background-repeat:no-repeat; background-size:cover;
}
/* Zrneni proti pruhum (banding) v gradientu. Samotny prechod je uz
   matematicky hladky -- pruhy vznikaji az zaokrouhlenim na 8 bitu na kanal,
   takze rozmazani by je neodstranilo (neni co rozmazat, sousedni pruhy uz
   jsou ploche). Rozbiji se sumem, coz je stejny princip jako dithering.
   Overlay znamena, ze stredni seda necha podklad byt a meni ho az odchylka
   od ni, takze se cerna nezesvetli. Sila je --wall-dither a da se prestavit
   v adminu (MF Art -> Nasviceni zdi). stitchTiles drzi dlazdice sumu
   navazane, aby po obrazovce nebyla videt mrizka 120 px. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--wall-dither); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  background-size:120px 120px;
}
[data-theme="galerie"]{ --gold-50:var(--gold); --focus:#4B135E; }
[data-theme="galerie"] h1,[data-theme="galerie"] h2{letter-spacing:-0.015em;}
[data-theme="galerie"]{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%228%22 height=%228%22%3E%3Ccircle cx=%224%22 cy=%224%22 r=%223%22 fill=%22%23191510%22/%3E%3C/svg%3E') 4 4,auto;}
[data-theme="noir"]{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%228%22 height=%228%22%3E%3Ccircle cx=%224%22 cy=%224%22 r=%223%22 fill=%22%23e8e2d4%22/%3E%3C/svg%3E') 4 4,auto;}
[data-theme] button,[data-theme] a{cursor:inherit;}
[data-theme="galerie"] input,[data-theme="galerie"] textarea{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%222%22 height=%2222%22%3E%3Crect width=%222%22 height=%2222%22 fill=%22%23191510%22/%3E%3C/svg%3E') 1 11,text;}
[data-theme="noir"] input,[data-theme="noir"] textarea{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%222%22 height=%2222%22%3E%3Crect width=%222%22 height=%2222%22 fill=%22%23e8e2d4%22/%3E%3C/svg%3E') 1 11,text;}
[data-theme] input:focus,[data-theme] textarea:focus{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%222%22 height=%2222%22%3E%3Crect width=%222%22 height=%2222%22 fill=%22%23FFB411%22/%3E%3C/svg%3E') 1 11,text;}
[data-theme="galerie"] #pribeh{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%228%22 height=%228%22%3E%3Ccircle cx=%224%22 cy=%224%22 r=%223%22 fill=%22%23f2ece0%22/%3E%3C/svg%3E') 4 4,auto;}
[data-theme="noir"] #pribeh{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%228%22 height=%228%22%3E%3Ccircle cx=%224%22 cy=%224%22 r=%223%22 fill=%22%23111110%22/%3E%3C/svg%3E') 4 4,auto;}
[data-theme="galerie"] #pribeh button:hover,[data-theme="galerie"] #pribeh a:hover{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%226%22 fill=%22%23FFB411%22/%3E%3C/svg%3E') 8 8,pointer;}
[data-theme="noir"] #pribeh button:hover,[data-theme="noir"] #pribeh a:hover{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%226%22 fill=%22%23FFB411%22/%3E%3C/svg%3E') 8 8,pointer;}
[data-theme="galerie"] a:hover,[data-theme="galerie"] button:hover{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%226%22 fill=%22%23FFB411%22/%3E%3C/svg%3E') 8 8,pointer;}
[data-theme="noir"] a:hover,[data-theme="noir"] button:hover{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%226%22 fill=%22%23FFB411%22/%3E%3C/svg%3E') 8 8,pointer;}
[data-theme="galerie"] [data-zoom]:hover{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22 fill=%22none%22 stroke=%22%23FFB411%22 stroke-width=%221.8%22/%3E%3Cline x1=%2217%22 y1=%2217%22 x2=%2224%22 y2=%2224%22 stroke=%22%23FFB411%22 stroke-width=%221.8%22/%3E%3C/svg%3E') 11 11,pointer;}
[data-theme="noir"] [data-zoom]:hover{cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22 fill=%22none%22 stroke=%22%23FFB411%22 stroke-width=%221.8%22/%3E%3Cline x1=%2217%22 y1=%2217%22 x2=%2224%22 y2=%2224%22 stroke=%22%23FFB411%22 stroke-width=%221.8%22/%3E%3C/svg%3E') 11 11,pointer;}
[data-theme]::after{content:'';position:fixed;inset:0;z-index:100;pointer-events:none;opacity:var(--grain);mix-blend-mode:var(--grain-blend);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px;}
*,*::before,*::after{box-sizing:border-box;}
/* Karta/menu (mf-cart-panel, mf-mobile-nav) jsou schovane mimo obrazovku
   pres transform:translateX(100%) -- bez tohohle by je nektere mobilni
   prohlizece pocitaly do sirky stranky a dovolily vodorovny scroll,
   ktery odkryje jejich okraj a posune viditelny obsah doleva. */
/* Vodorovny orez patri JEN na body, ne na html. Kdyz ho mely obe, byl i
   html scroll container, tim padem se overflow z body neprenesl na viewport
   a body zustalo vlastnim scroll containerem -- a sticky hlavicka se pak
   pripinala k boxu body, ktery se scrolluje s obsahem, takze odjela nahoru
   misto aby zustala viset. Takhle se hodnota z body propaguje na viewport,
   orez zustava, ale body uz scroll container neni a sticky funguje.
   (Stejny duvod je popsany u html.mf-scroll-locked v main.css.) */
body{ overflow-x:hidden; }
html{scroll-behavior:smooth; overscroll-behavior-y:none;}
section[id]{scroll-margin-top:88px;}
html,body{margin:0;padding:0;}
/* Barva plochy patri JEN na <html>, ne na <body>. Kdyz ji mel i body,
   jeho neprusvitne pozadi se kreslilo az PO te vinete (kresli ji html::before,
   ma z-index:-1, tedy vrstvu pod bezne umistenym obsahem, ale nad barvou
   plochy) a gradient prekrylo uplne -- vineta byla na obou skinech
   neviditelna. Overeno v prohlizeci: po zpruhledneni body se objevila.
   POZOR: nepridavej sem body zpatky. Plocha ma barvu dal, nese ji html. */
html{background:var(--shadow);}
/* viewport-fit=cover (viz header.php) dovoluje strance kreslit i pod
   systemovymi prekryvy (gesto-navigace, notch) -- bez tohoto paddingu by
   posledni radek obsahu mohl byt pod gesto-listou schovany. Pozadi tam uz
   je spravne (viz radek vyse), tohle jen hlida citelnost obsahu. */
body{padding-bottom:env(safe-area-inset-bottom);}
body{font-family:var(--font-body);font-size:var(--t-body);line-height:1.65;color:var(--sanctuary);-webkit-font-smoothing:antialiased;}
h1,h2,h3,p,figure{margin:0;}
a{color:var(--sanctuary);}
a:hover{color:#FFFFFF;}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
@keyframes slideOutLeft{from{opacity:1;transform:none}to{opacity:0;transform:translateX(calc(-1 * var(--shift,160px)))}}
@keyframes slideOutRight{from{opacity:1;transform:none}to{opacity:0;transform:translateX(var(--shift,160px))}}
@keyframes slideInRight{from{opacity:0;transform:translateX(var(--shift,160px))}to{opacity:1;transform:none}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(calc(-1 * var(--shift,160px)))}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes barIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}html{scroll-behavior:auto}}