@font-face{font-family:Oldschool;src:url("fonts/oldschool-grotesk-condensed-extra-bold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Feature;src:url("fonts/feature-display-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
:root{--pink:#ce0f68;--yellow:#ffed00;--beige:#fef7e0;--orange:#ff9100;--green:#6cb78b;--purple:#a793e2;--light-pink:#ff7bc3;--ink:#ce0f68;--header:5.25rem;--shell:min(1180px,calc(100% - 3rem))}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header)}
body{margin:0;background:var(--pink);color:var(--beige);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:1rem;line-height:1.55}
button,a{font:inherit}
a{color:inherit}
img{display:block;max-width:100%}
.skip-link{position:fixed;z-index:1000;left:1rem;top:-5rem;background:var(--yellow);color:var(--pink);padding:.7rem 1rem;border-radius:999px;font-weight:800}.skip-link:focus{top:1rem}
.site-header{height:var(--header);padding:0 max(1.5rem,calc((100vw - 1180px)/2));position:sticky;top:0;z-index:50;background:var(--beige);display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 0 rgba(206,15,104,.08)}
.brand img{width:9.5rem;height:auto}.site-header nav{display:flex;gap:clamp(1rem,3vw,2.5rem)}
.site-header nav a{color:var(--pink);font-family:Oldschool,sans-serif;text-transform:uppercase;text-decoration:none;font-size:1.1rem;letter-spacing:.02em;position:relative}
.site-header nav a:after{content:"";position:absolute;left:0;right:0;bottom:-.25rem;height:.18rem;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}.site-header nav a:hover:after,.site-header nav a:focus-visible:after{transform:scaleX(1)}
.hero{min-height:calc(82svh - var(--header));display:grid;align-items:center;position:relative;overflow:hidden;background:var(--pink)}
.hero-inner{width:var(--shell);margin:0 auto;padding:5rem 0 7rem;position:relative;z-index:1}
.hero h1{margin:0;max-width:11ch;font-family:Oldschool,sans-serif;font-size:clamp(4.4rem,11vw,9.8rem);font-weight:800;line-height:.9;letter-spacing:-.025em;text-transform:uppercase;color:var(--beige)}
.krnov-bubble{display:inline-block;white-space:nowrap;margin-top:.26em;padding:.11em .28em .15em;color:var(--pink);background:var(--beige);font-family:Feature,serif;font-size:.72em;line-height:1;border-radius:999px 999px 999px 1.1rem;text-transform:none;letter-spacing:-.02em;transform:rotate(-1.5deg)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.5rem}.button{display:inline-flex;align-items:center;justify-content:center;min-width:9.5rem;padding:.88rem 1.35rem;background:var(--yellow);color:var(--pink);border:2px solid var(--yellow);border-radius:999px;font-family:Oldschool,sans-serif;font-size:1.15rem;text-transform:uppercase;text-decoration:none;letter-spacing:.02em;transition:transform .2s ease,box-shadow .2s ease}.button:hover,.button:focus-visible{transform:translateY(-3px);box-shadow:0 .65rem 1.4rem rgba(83,0,39,.22)}
.section-shell{width:var(--shell);margin:0 auto}.people{padding:7rem 0 8rem;background:var(--pink)}
.section-intro{max-width:790px;margin-bottom:3.4rem}.eyebrow{margin:0 0 .4rem;font-family:Oldschool,sans-serif;font-size:1.08rem;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow)}
.section-intro h2{margin:0;font:800 clamp(4rem,8vw,7.6rem)/.84 Oldschool,sans-serif;text-transform:uppercase;letter-spacing:-.035em;color:var(--yellow)}
.section-intro>p:last-child{max-width:720px;margin:1.5rem 0 0;font-size:clamp(1.05rem,1.8vw,1.32rem);color:var(--beige)}
.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.35rem}
.person-card{position:relative;aspect-ratio:4/5;padding:0;overflow:hidden;background:var(--beige);color:var(--pink);border:0;border-radius:1.15rem;text-align:left;cursor:pointer;box-shadow:0 .7rem 2.2rem rgba(88,0,41,.12);transition:transform .25s ease,box-shadow .25s ease}
.person-card:hover,.person-card:focus-visible{transform:translateY(-7px);box-shadow:0 1.25rem 2.8rem rgba(88,0,41,.24);outline:3px solid var(--yellow);outline-offset:3px}
.person-card img{width:100%;height:100%;object-fit:cover;object-position:center 31%;filter:saturate(.86) contrast(1.035) brightness(.985);transition:transform .35s ease,filter .35s ease}.person-card:hover img{transform:scale(1.018)}
.person-card[data-person="0"] img,.person-card[data-person="8"] img{filter:sepia(.025) saturate(.88) contrast(1.035) brightness(.985)}
.person-card[data-person="1"] img,.person-card[data-person="3"] img,.person-card[data-person="4"] img,.person-card[data-person="7"] img{filter:saturate(.76) contrast(1.045) brightness(.965)}
.person-card[data-person="2"] img,.person-card[data-person="5"] img,.person-card[data-person="6"] img{filter:saturate(.82) contrast(1.04) brightness(.975)}
.candidate-number{position:absolute;z-index:2;top:.8rem;left:.8rem;width:3rem;height:3rem;display:grid;place-items:center;border-radius:50%;background:var(--yellow);color:var(--pink);font:800 1.55rem/1 Oldschool,sans-serif;box-shadow:0 .3rem .9rem rgba(70,0,32,.16)}
.person-copy{position:absolute;z-index:1;left:0;right:0;bottom:0;display:block;min-height:0;padding:4.8rem 1.35rem 1.45rem;background:linear-gradient(to top,var(--beige) 0%,rgba(254,247,224,.97) 52%,rgba(254,247,224,0) 100%)}.person-copy strong{display:block;font:800 clamp(1.75rem,3vw,2.6rem)/.92 Oldschool,sans-serif;text-transform:uppercase;letter-spacing:-.02em}.person-copy small{display:block;margin-top:.5rem;font-size:1rem;font-weight:650;line-height:1.3}
.vision{padding:8rem 0;background:var(--beige);color:var(--pink)}.vision-intro .eyebrow{color:var(--pink)}.vision-intro h2{color:var(--pink)}.vision-intro>p:last-child{color:var(--pink)}
.filters{display:flex;flex-wrap:wrap;gap:.65rem;margin:0 0 3rem}.filters button,.tags span{border:0;color:var(--pink);font-weight:800;line-height:1.1}
.filters button{padding:.72rem 1rem;border-radius:999px 999px 999px .45rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,outline-color .2s ease;outline:3px solid transparent;outline-offset:2px}
.filters button:nth-child(3n+2){border-radius:999px .55rem 999px 999px}.filters button:nth-child(3n){border-radius:.55rem 999px 999px 999px}.filters button:hover{transform:translateY(-2px)}.filters button[aria-pressed="true"]{outline-color:var(--pink);transform:scale(1.035);box-shadow:0 .45rem 1rem rgba(206,15,104,.16)}
.filters [data-filter="Kultura"],.filters [data-filter="Energetika"],.filters [data-filter="Sport"],.filters [data-filter="Čistá obec"],.tags [data-category="Kultura"],.tags [data-category="Energetika"],.tags [data-category="Sport"],.tags [data-category="Čistá obec"]{background:var(--orange)}
.filters [data-filter="Zeleň"],.filters [data-filter="Digitalizace"],.filters [data-filter="Doprava"],.tags [data-category="Zeleň"],.tags [data-category="Digitalizace"],.tags [data-category="Doprava"]{background:var(--green)}
.filters [data-filter="Odpadové hospodářství"],.filters [data-filter="Transparentnost"],.filters [data-filter="Sociální oblast"],.filters [data-filter="Školství"],.tags [data-category="Odpadové hospodářství"],.tags [data-category="Transparentnost"],.tags [data-category="Sociální oblast"],.tags [data-category="Školství"]{background:var(--purple)}
.filters [data-filter="Bezpečnost"],.filters [data-filter="Krnov"],.tags [data-category="Bezpečnost"],.tags [data-category="Krnov"]{background:var(--light-pink)}
.program-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;align-items:start}
.program-card{padding:2.1rem;background:#fffdf5;border-radius:1.15rem;box-shadow:0 .45rem 1.4rem rgba(96,51,23,.07);transition:opacity .18s ease,transform .18s ease}.program-card.priority{background:var(--yellow)}.program-card[hidden]{display:none}
.priority-label{margin:0 0 .9rem!important;font:800 .9rem/1 Oldschool,sans-serif;text-transform:uppercase;letter-spacing:.08em}
.program-card h3{margin:0 0 .8rem;font:800 clamp(2rem,3.4vw,3rem)/.9 Oldschool,sans-serif;text-transform:uppercase;letter-spacing:-.02em}.program-card>p:not(.priority-label){margin:0;font-size:1.02rem}
.tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}.tags span{padding:.6rem .85rem;border-radius:999px 999px 999px .45rem;font-size:.83rem}.tags span:nth-child(even){border-radius:999px .45rem 999px 999px}
footer{background:var(--pink);color:var(--yellow);padding:3.5rem 0}.footer-inner{width:var(--shell);margin:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}.footer-inner img{width:11rem}.footer-inner p{max-width:560px;margin:0;text-align:right;font-size:.9rem;font-weight:750}
.person-dialog{width:min(900px,calc(100% - 2rem));padding:0;border:0;border-radius:1.4rem;background:var(--beige);color:var(--pink);box-shadow:0 2rem 6rem rgba(50,0,23,.35);overflow:hidden}.person-dialog::backdrop{background:rgba(62,0,29,.72);backdrop-filter:blur(5px)}.person-dialog[open]{animation:dialog-in .22s ease-out}
.dialog-close{position:absolute;z-index:2;right:1rem;top:1rem;width:2.8rem;height:2.8rem;border:0;border-radius:50%;background:var(--yellow);color:var(--pink);font-size:2rem;line-height:1;cursor:pointer}.dialog-close:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.dialog-layout{display:grid;grid-template-columns:minmax(280px,.82fr) 1.18fr;min-height:580px}.dialog-photo{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(.86) contrast(1.035) brightness(.985)}.person-dialog[data-person="0"] .dialog-photo,.person-dialog[data-person="8"] .dialog-photo{filter:sepia(.025) saturate(.88) contrast(1.035) brightness(.985)}.person-dialog[data-person="1"] .dialog-photo,.person-dialog[data-person="3"] .dialog-photo,.person-dialog[data-person="4"] .dialog-photo,.person-dialog[data-person="7"] .dialog-photo{filter:saturate(.76) contrast(1.045) brightness(.965)}.person-dialog[data-person="2"] .dialog-photo,.person-dialog[data-person="5"] .dialog-photo,.person-dialog[data-person="6"] .dialog-photo{filter:saturate(.82) contrast(1.04) brightness(.975)}.dialog-content{align-self:center;padding:clamp(2rem,5vw,4rem)}.dialog-number{margin:0 0 .8rem;color:var(--pink);font:800 1rem/1 Oldschool,sans-serif;text-transform:uppercase;letter-spacing:.08em}.dialog-content h2{margin:0;font:800 clamp(3rem,7vw,5.5rem)/.82 Oldschool,sans-serif;text-transform:uppercase}.dialog-role{margin:.9rem 0 2rem;font-size:1.15rem;font-weight:800}.dialog-placeholder{margin:0;padding-top:1.5rem;font-style:italic;opacity:.72}
@keyframes dialog-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:820px){:root{--header:4.5rem;--shell:min(100% - 2rem,680px)}.site-header{padding:0 1rem}.brand img{width:7rem}.site-header nav{gap:.9rem}.site-header nav a{font-size:.91rem}.hero{min-height:calc(78svh - var(--header))}.hero-inner{padding:4rem 0 5rem}.hero h1{font-size:clamp(4rem,18vw,6.8rem);line-height:.92}.people{padding:5.5rem 0 6rem}.people-grid{grid-template-columns:repeat(2,1fr)}.program-grid{grid-template-columns:1fr}.vision{padding:6rem 0}.filters{flex-wrap:nowrap;overflow-x:auto;margin-left:-1rem;margin-right:-1rem;padding:.2rem 1rem 1rem;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}.filters button{flex:0 0 auto}.dialog-layout{grid-template-columns:1fr}.dialog-photo{height:min(54vh,480px)}.dialog-content{padding:2rem}.footer-inner{align-items:flex-start;flex-direction:column}.footer-inner p{text-align:left}}
@media(max-width:520px){.brand img{width:6.4rem}.site-header nav{gap:.65rem}.site-header nav a{font-size:.8rem}.hero h1{font-size:clamp(3.7rem,19vw,5.7rem);line-height:.94}.krnov-bubble{font-size:.67em;margin-top:.3em}.hero-actions{margin-top:2rem}.button{min-width:0;flex:1;padding:.78rem .75rem}.section-intro h2{font-size:clamp(3.8rem,19vw,6rem)}.people-grid{gap:.8rem}.person-card{border-radius:.85rem}.candidate-number{top:.5rem;left:.5rem;width:2.35rem;height:2.35rem;font-size:1.2rem}.person-copy{padding:3.6rem .85rem .9rem}.person-copy strong{font-size:clamp(1.3rem,6.6vw,1.85rem)}.person-copy small{margin-top:.35rem;font-size:.82rem}.program-card{padding:1.5rem}.program-card h3{font-size:2.05rem}.dialog-layout{display:block}.dialog-photo{height:44vh}.dialog-content h2{font-size:3.4rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
