:root{
            --board:#22312a; --board2:#1b2822; --chalk:#f0ead8; --chalk-dim:rgba(240,234,216,.55);
            --yellow:#e9c46a; --pink:#e8a2a2; --blue:#9fc5d8; --green:#a8d5a2; --orange:#e6a670; --wood:#5b4128; --wood2:#6d5033;
        }
        *{margin:0;padding:0;box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            font-family:'Work Sans',sans-serif;color:var(--chalk);line-height:1.6;
            background:var(--wood);
            padding:clamp(10px,2.5vw,26px);
        }
        /* dřevěný rám kolem celé stránky */
        .frame{
            border:6px solid var(--wood2);outline:3px solid #3e2b17;
            box-shadow:inset 0 0 0 3px #3e2b17, 0 10px 40px rgba(0,0,0,.5);
            background:
                    radial-gradient(ellipse at 30% 20%, rgba(240,234,216,.045), transparent 55%),
                    radial-gradient(ellipse at 75% 80%, rgba(240,234,216,.035), transparent 50%),
                    linear-gradient(160deg,var(--board),var(--board2));
            position:relative;overflow:hidden;
        }
        /* šmouhy po houbě */
        .frame::before{
            content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
            background:
                    radial-gradient(ellipse 340px 90px at 20% 32%, rgba(240,234,216,.05), transparent),
                    radial-gradient(ellipse 420px 110px at 80% 58%, rgba(240,234,216,.04), transparent),
                    radial-gradient(ellipse 300px 80px at 45% 85%, rgba(240,234,216,.05), transparent);
        }
        .amatic{font-family:'Amatic SC',cursive}
        .caveat{font-family:'Caveat',cursive}

        /* ======= HERO ======= */
        header{text-align:center;padding:4.5rem 1rem 3rem;position:relative}
        .dnes{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block}
        .duo{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 2.6rem;margin-top:.8rem}
        .duo h1{font-family:'Amatic SC',cursive;font-weight:700;font-size:clamp(2.9rem,8vw,5.6rem);line-height:1;
            letter-spacing:3px;text-shadow:0 0 12px rgba(240,234,216,.25);display:flex;align-items:center;gap:1rem}
        .duo .amp{font-family:'Caveat',cursive;font-size:clamp(2rem,5vw,3.4rem);color:var(--chalk-dim);transform:rotate(-6deg)}
        .under{width:min(420px,70%);margin:0.9rem auto 0;height:14px}
        .under path{stroke:var(--yellow);stroke-width:3;fill:none;stroke-linecap:round;
            stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.6s .4s ease forwards}
        @keyframes draw{to{stroke-dashoffset:0}}
        .claim{font-family:'Caveat',cursive;font-size:clamp(1.5rem,4vw,2rem);margin-top:1.2rem;color:var(--chalk)}
        .claim b{color:var(--yellow);font-weight:700}
        .hero-icons{margin-top:1.4rem;display:flex;justify-content:center;align-items:flex-end;gap:2.6rem}
        /* křídou kreslený půllitr, pěna ujíždí */
        .pint{width:82px;height:auto}
        .pint *{stroke:var(--chalk);stroke-width:3;fill:none;stroke-linecap:round}
        .pint .beer{fill:rgba(233,196,106,.25);stroke:none}
        .foam-blob{animation:bob 3s ease-in-out infinite}
        @keyframes bob{50%{transform:translateY(-4px)}}
        .hero-run{font-size:3rem;animation:bob 3s .6s ease-in-out infinite;display:inline-block}

        /* křídové info řádky */
        .chalk-info{margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.6rem}
        .chalk-info div{font-family:'Caveat',cursive;font-size:1.55rem}
        .chalk-info b{color:var(--yellow);font-weight:700}
        .chalk-info div:nth-child(2) b{color:var(--pink)}
        .chalk-info div:nth-child(3) b{color:var(--blue)}
        .chalk-info div:nth-child(4) b{color:var(--green)}

        .intro{max-width:640px;margin:2.2rem auto 0;color:var(--chalk-dim);font-size:1rem;padding:0 1rem}

        section{max-width:980px;margin:0 auto;padding:3.4rem 1.4rem}
        .sec-title{font-family:'Amatic SC',cursive;font-weight:700;font-size:clamp(2.6rem,6vw,4rem);
            letter-spacing:4px;text-align:center}
        .sec-note{font-family:'Caveat',cursive;text-align:center;font-size:1.45rem;color:var(--chalk-dim);margin-bottom:2.4rem}
        .squig{display:block;margin:.3rem auto 0;width:140px}
        .squig path{stroke:var(--pink);stroke-width:2.5;fill:none;stroke-linecap:round}

        .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
        .reveal.in{opacity:1;transform:none}

        /* ======= NABÍDKA (pivovary jako menu na tabuli) ======= */
        .menu{max-width:640px;margin:0 auto}
        .menu-row{display:flex;align-items:baseline;gap:.9rem;padding:1.05rem 0;border-bottom:1px dashed rgba(240,234,216,.25)}
        .menu-row:last-child{border-bottom:none}
        .m-num{font-family:'Amatic SC',cursive;font-weight:700;font-size:1.9rem;color:var(--yellow);min-width:2rem}
        .m-name{font-family:'Amatic SC',cursive;font-weight:700;font-size:clamp(1.7rem,4vw,2.3rem);letter-spacing:2px}
        .m-dots{flex:1;border-bottom:2px dotted rgba(240,234,216,.4);transform:translateY(-6px)}
        .m-tag{font-family:'Caveat',cursive;font-size:1.3rem;color:var(--chalk-dim);white-space:nowrap}
        .menu-row{align-items:center}
        .m-logo{width:104px;height:74px;background:var(--chalk);border-radius:4px;display:flex;align-items:center;justify-content:center;
            padding:6px 8px;box-shadow:0 4px 10px rgba(0,0,0,.35);flex:none}
        .m-logo img{max-width:100%;max-height:100%;display:block}
        .m-logo.ph{font-family:'Caveat',cursive;color:#8a8474;font-size:.98rem;text-align:center;line-height:1.05}
        .menu-note{font-family:'Caveat',cursive;text-align:center;color:var(--pink);font-size:1.35rem;margin-top:1.8rem;transform:rotate(-1.5deg)}

        /* ======= BĚH ======= */
        .run{position:relative;max-width:860px;margin:0 auto;text-align:center}
        .run p.txt{max-width:600px;margin:0 auto 2rem;color:var(--chalk-dim);font-size:1.02rem}
        .run-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.4rem;margin-bottom:2.2rem}
        .run-facts div{font-family:'Caveat',cursive;font-size:1.5rem}
        .run-facts b{font-weight:700}
        .run-facts div:nth-child(1) b{color:var(--yellow)}
        .run-facts div:nth-child(2) b{color:var(--pink)}
        .run-facts div:nth-child(3) b{color:var(--blue)}
        .run-facts div:nth-child(4) b{color:var(--green)}
        .trail-wrap{position:relative;height:150px;margin:0 auto 1.4rem}
        .trail{width:100%;height:100%}
        .trail .hill-line{stroke:var(--chalk);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:8 10}
        .trail .flag{stroke:var(--pink);stroke-width:2.5;fill:none}
        /* ======= DOPROVODNÝ PROGRAM (kartičky s magnetkou) ======= */
        .attr{display:flex;flex-wrap:wrap;justify-content:center;gap:1.8rem}
        .card{background:var(--chalk);padding:.55rem .55rem 2rem;position:relative;width:215px;
            box-shadow:0 8px 20px rgba(0,0,0,.45);transition:transform .3s}
        .card:nth-child(odd){transform:rotate(-2deg)} .card:nth-child(even){transform:rotate(2deg)}
        .card:hover{transform:rotate(0) scale(1.06);z-index:4}
        .card .img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:2.6rem}
        .card .cap{position:absolute;bottom:.3rem;left:0;right:0;text-align:center;font-family:'Caveat',cursive;color:#555;font-size:1.2rem}
        .card::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
            width:22px;height:22px;border-radius:50%;
            background:radial-gradient(circle at 35% 30%, #ff8f8f, #c0392b 70%);box-shadow:0 3px 6px rgba(0,0,0,.4)}
        .card:nth-child(2)::before{background:radial-gradient(circle at 35% 30%, #9fd8ff, #2471a3 70%)}
        .card:nth-child(3)::before{background:radial-gradient(circle at 35% 30%, #ffe29a, #b7950b 70%)}
        .card:nth-child(4)::before{background:radial-gradient(circle at 35% 30%, #b7ffb0, #1e8449 70%)}
        .a1{background:linear-gradient(135deg,#c96f3b,#7a3c14)} .a2{background:linear-gradient(135deg,#7d99ad,#42606e)}
        .a3{background:linear-gradient(135deg,#6b8e5a,#3c5530)} .a4{background:linear-gradient(135deg,#b45f4d,#6e2f22)}

        /* ======= OBČERSTVENÍ ======= */
        .food{max-width:640px;margin:0 auto;text-align:center}
        .food .stand{font-family:'Amatic SC',cursive;font-weight:700;font-size:clamp(2.2rem,5vw,3rem);letter-spacing:3px;
            display:inline-block;padding:.4rem 1.6rem;position:relative}
        .food .stand svg{position:absolute;inset:0;width:100%;height:100%}
        .food .stand .ico{position:static;inset:auto;width:.55em;height:.55em;vertical-align:-.04em}
        .food .stand svg rect{fill:none;stroke:var(--yellow);stroke-width:2.5;stroke-linecap:round}
        .food p{color:var(--chalk-dim);margin-top:1.4rem;font-size:1.02rem}
        .food .caveat-note{font-family:'Caveat',cursive;font-size:1.45rem;color:var(--green);margin-top:1.2rem;transform:rotate(-1deg)}

        /* ======= KAPELY (křídové rámečky) ======= */
        .bands{display:flex;flex-wrap:wrap;justify-content:center;gap:1.8rem}
        .band{position:relative;padding:1.8rem 2.4rem;text-align:center;min-width:230px;transition:transform .25s}
        .band:hover{transform:scale(1.04) rotate(-1deg)}
        .band svg.box{position:absolute;inset:0;width:100%;height:100%}
        .band svg.box rect{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 0;rx:8}
        .band h3{font-family:'Amatic SC',cursive;font-weight:700;font-size:2.4rem;letter-spacing:3px}
        .band p{font-family:'Caveat',cursive;font-size:1.3rem;color:var(--chalk-dim)}
        .band.b1 svg.box rect{stroke:var(--yellow)} .band.b2 svg.box rect{stroke:var(--pink)} .band.b3 svg.box rect{stroke:var(--blue)}

        /* ======= GALERIE (fotky s magnetkami na tabuli) ======= */
        .photos{display:flex;flex-wrap:wrap;justify-content:center;gap:1.8rem}
        .photo{background:var(--chalk);padding:.55rem .55rem 1.9rem;position:relative;width:215px;
            box-shadow:0 8px 20px rgba(0,0,0,.45);transition:transform .3s}
        .photo:nth-child(odd){transform:rotate(-2.5deg)} .photo:nth-child(even){transform:rotate(2deg)}
        .photo:hover{transform:rotate(0) scale(1.06);z-index:4}
        .photo .img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:2.6rem}
        .photo .cap{position:absolute;bottom:.25rem;left:0;right:0;text-align:center;font-family:'Caveat',cursive;color:#555;font-size:1.15rem}
        .photo::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
            width:22px;height:22px;border-radius:50%;
            background:radial-gradient(circle at 35% 30%, #ff8f8f, #c0392b 70%);box-shadow:0 3px 6px rgba(0,0,0,.4)}
        .photo:nth-child(2)::before{background:radial-gradient(circle at 35% 30%, #9fd8ff, #2471a3 70%)}
        .photo:nth-child(3)::before{background:radial-gradient(circle at 35% 30%, #ffe29a, #b7950b 70%)}
        .photo:nth-child(5)::before{background:radial-gradient(circle at 35% 30%, #b7ffb0, #1e8449 70%)}
        .g1{background:linear-gradient(135deg,#c9a227,#7a5c0e)} .g2{background:linear-gradient(135deg,#6b8e5a,#3c5530)}
        .g3{background:linear-gradient(135deg,#b45f4d,#6e2f22)} .g4{background:linear-gradient(135deg,#7d99ad,#42606e)}
        .g5{background:linear-gradient(135deg,#a08a5f,#5c4a2a)} .g6{background:linear-gradient(135deg,#8f6f9e,#4e3a58)}

        /* ======= SOCKY (QR kódy) ======= */
        .socials{display:flex;flex-wrap:wrap;justify-content:center;gap:2.4rem}
        .qr-chalk{display:inline-block;background:var(--chalk);color:#222;padding:1rem 1rem .7rem;
            border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.4);text-align:center;transition:transform .3s}
        .qr-chalk:nth-child(odd){transform:rotate(-2deg)} .qr-chalk:nth-child(even){transform:rotate(2deg)}
        .qr-chalk:hover{transform:rotate(0) scale(1.05)}
        .qr-ph{width:150px;height:150px;background:repeating-conic-gradient(#222 0% 25%,#f8f5ea 0% 50%) 0 0/20px 20px}
        .qr-chalk small{display:block;font-family:'Caveat',cursive;font-size:1.3rem;margin-top:.5rem;color:#333}
        .qr-chalk .net{font-family:'Amatic SC',cursive;font-weight:700;font-size:1.6rem;letter-spacing:2px;color:#222;margin-top:.2rem;display:block}

        /* ======= KDY A KDE ======= */
        .where{max-width:640px;margin:0 auto;text-align:center}
        .where .big{font-family:'Amatic SC',cursive;font-weight:700;font-size:clamp(2.6rem,7vw,4.2rem);letter-spacing:4px;color:var(--yellow)}
        .where .place{font-family:'Amatic SC',cursive;font-weight:700;font-size:clamp(2rem,5vw,3rem);letter-spacing:3px;margin-top:.4rem}
        .where .rows{margin-top:1.4rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2.4rem}
        .where .rows div{font-family:'Caveat',cursive;font-size:1.5rem}
        .where .rows b{color:var(--pink);font-weight:700}
        .where .rows div:nth-child(2) b{color:var(--blue)}

        /* ======= PATIČKA ======= */
        footer{text-align:center;padding:3rem 1rem 3.5rem}
        footer .line{width:190px;margin:0 auto 1.4rem}
        footer .line path{stroke:var(--chalk-dim);stroke-width:2;fill:none;stroke-linecap:round}
        footer p{font-family:'Caveat',cursive;font-size:1.4rem;color:var(--chalk-dim)}
        footer small{display:block;margin-top:1rem;font-size:.78rem;opacity:.45}

        /* ======= MOBIL ======= */
        @media (max-width:860px){
            .trail-wrap{height:auto}
        }
        @media (max-width:640px){
            header{padding:3rem .8rem 2.2rem}
            .duo{gap:.3rem 1.2rem}
            .duo h1{letter-spacing:1.5px;gap:.5rem;font-size:clamp(2.1rem,9vw,3rem);flex-wrap:wrap;justify-content:center}
            .chalk-info,.run-facts{gap:.4rem 1.6rem}
            .chalk-info div,.run-facts div{font-size:1.35rem}
            section{padding:2.6rem 1rem}
            /* menu pivovarů: dovolit zalomení, štítek pod název */
            .menu-row{flex-wrap:wrap;row-gap:.1rem}
            .m-name{font-size:1.6rem;letter-spacing:1px}
            .m-dots{display:none}
            .m-tag{flex-basis:100%;padding-left:2.9rem;font-size:1.15rem}
            .m-logo{width:80px;height:58px}
            .band{min-width:0;width:100%;max-width:320px;padding:1.4rem 1.6rem}
            .band h3{font-size:2rem}
            .card,.photo{width:min(215px,44vw)}
            .qr-ph{width:120px;height:120px}
            .food .stand{font-size:1.7rem;padding:.35rem 1rem}
        }
        @media (max-width:380px){
            .card,.photo{width:100%;max-width:240px}
        }

        /* ======= IKONY (misto emoji, jednotne vsude) ======= */
        .ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em;margin-right:.45rem;flex:none}
                .sec-title .ico{width:.72em;height:.72em;vertical-align:-.05em}
        .duo h1 .ico{width:.72em;height:.72em;margin-right:0}
        .hero-run .cico{width:60px;height:60px;margin:0}
        .card .img .ico{width:58px;height:58px;margin:0;color:var(--chalk)}
        .cico{width:1em;height:1em;display:inline-block;vertical-align:-.14em;margin-right:.5rem;flex:none}
        .sec-title .cico{width:.85em;height:.85em;vertical-align:-.12em}
        .duo h1 .cico{width:.8em;height:.8em;margin-right:.2em}
        .hero-icons .cico{width:64px;height:64px;margin:0}
        /* barevne ikony */
        .duo h1:nth-of-type(1) .ico{color:var(--yellow)}
        .duo h1:nth-of-type(2) .ico{color:var(--pink)}
        .hero-run .ico{color:var(--pink)}
        #pivovary .sec-title .ico{color:var(--yellow)}
        #beh .sec-title .ico{color:var(--pink)}
        #program .sec-title .ico{color:var(--orange)}
        #obcerstveni .sec-title .ico{color:var(--yellow)}
        #kapely .sec-title .ico{color:var(--pink)}
        #socky .sec-title .ico{color:var(--blue)}
        #kdyakde .sec-title .ico{color:var(--yellow)}
        .run-facts div:nth-child(1) .ico{color:var(--yellow)}
        .run-facts div:nth-child(2) .ico{color:var(--pink)}
        .run-facts div:nth-child(3) .ico{color:var(--blue)}
        .run-facts div:nth-child(4) .ico{color:var(--green)}
        .where .rows div:nth-child(1) .ico{color:var(--pink)}
        .where .rows div:nth-child(2) .ico{color:var(--blue)}
        .food .stand .ico{color:#b7950b}

        @media (prefers-reduced-motion: reduce){
            *,*::before,*::after{animation:none !important;transition:none !important}
            .reveal{opacity:1;transform:none}
            .under path{stroke-dashoffset:0}
        }

/* Samostatné soubory jednobarevných ikon */
.ico{
    background-color:currentColor;
    -webkit-mask:var(--icon-url) center/contain no-repeat;
    mask:var(--icon-url) center/contain no-repeat;
}
.icon-i-beer{--icon-url:url("../assets/icons/i-beer.svg")}
.icon-i-run{--icon-url:url("../assets/icons/i-run.svg")}
.icon-i-fox{--icon-url:url("../assets/icons/i-fox.svg")}
.icon-i-search{--icon-url:url("../assets/icons/i-search.svg")}
.icon-i-zip{--icon-url:url("../assets/icons/i-zip.svg")}
.icon-i-castle{--icon-url:url("../assets/icons/i-castle.svg")}
.icon-i-burger{--icon-url:url("../assets/icons/i-burger.svg")}
.icon-i-guitar{--icon-url:url("../assets/icons/i-guitar.svg")}
.icon-i-phone{--icon-url:url("../assets/icons/i-phone.svg")}
.icon-i-pin{--icon-url:url("../assets/icons/i-pin.svg")}
.icon-i-clock{--icon-url:url("../assets/icons/i-clock.svg")}
.icon-i-flag{--icon-url:url("../assets/icons/i-flag.svg")}
.icon-i-pen{--icon-url:url("../assets/icons/i-pen.svg")}
.icon-i-ticket{--icon-url:url("../assets/icons/i-ticket.svg")}
.icon-i-fork{--icon-url:url("../assets/icons/i-fork.svg")}
.band {
    position: relative;
    width: 260px;
    min-height: 220px;
    padding: 1.35rem 1.45rem 1.15rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform .25s;
}

.band-logo {
    position: relative;
    
    height: 100px;
    padding: 12px 16px;
    margin-bottom: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240,234,216,.94);
    border-radius: 5px;
    box-shadow: 0 5px 13px rgba(0,0,0,.28);
}

.band-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.band h3 {
    font-size: 2rem;
    line-height: 1.05;
}

.band p {
    font-size: 1.2rem;
    line-height: 1.2;
    margin-top: .15rem;
}
.qr-code {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: contain;
}

@media (max-width: 640px) {
    .qr-code {
        width: 120px;
        height: 120px;
    }
}
.card .img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.card .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}