:root{
  --bg:#e7e7e5; --bar:#dcdcd9; --ink:#0a0a0a;
  --muted:#bdbdb9; --label:#6b6b67; --card:#f2f2f0;
  --fs-xs:12px; --fs-s:13px; --fs-m:15px;
  --gap-nav:20px; --gap-nav-s:12px;
  --pad:clamp(16px,6vw,96px); --card-pad:clamp(20px,3vw,28px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--ink) var(--bg)}
body{background:var(--bg);color:var(--ink);font:var(--fs-m)/1.6 Unbounded,sans-serif;min-height:100svh;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* jeden kontejner se stejným okrajem vlevo i vpravo pro hlavičku, obsah i zápatí */
.wrap{margin:0 var(--pad)}

/* hlavička jako lišta o odstín tmavší než pozadí: název vlevo, menu vpravo */
.nav{background:var(--bar)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px}
.home{font-weight:800;font-size:var(--fs-m);min-height:44px;display:inline-flex;align-items:center}
/* malá silueta vodojemu před názvem */
.mark{width:18px;height:19.5px;margin-right:8px;flex:none;shape-rendering:geometricPrecision}
nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 var(--gap-nav);font-size:var(--fs-s)}
nav a{min-height:44px;display:inline-flex;align-items:center}
/* aktuální stránka ztučněná obrysem písma: šířka slova se nemění, takže mezery v menu zůstávají stejné */
nav a[aria-current]{-webkit-text-stroke:.6px currentColor}

/* ikona Instagramu úplně vpravo v menu */
.ig svg{width:16px;height:16px;display:block}

/* při najetí myší: plynulé zvětšení s lehkým nadzvednutím, pomalý návrat (jen zařízení s myší) */
nav a,.home{transition:transform .6s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  nav a:hover,.home:hover{transform:translateY(-2px) scale(1.1);transition:transform .5s cubic-bezier(.22,1,.36,1)}
}
nav a:active,.home:active{transform:translateY(0) scale(1.04);transition-duration:.15s}

/* textové stránky (O nás, festival) */
.page-head{padding:clamp(56px,9vw,112px) 0}
.prose{max-width:60ch;font-size:16px;line-height:1.7}
.prose h1,.prose h2{font-size:inherit;font-weight:800;margin-bottom:.8em}
.prose h1:has(+ .event-date){margin-bottom:0}
/* odkaz zpět na seznam událostí */
.back{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0 16px;font-size:var(--fs-s);color:var(--label);transition:color .3s}
@media (hover:hover){.back:hover{color:var(--ink)}}
.prose p+p{margin-top:1em}
/* text k akci o stupeň menší */
.story{font-size:var(--fs-s)}
/* fotky vedle sebe, pod nimi krátký popisek; na úzké obrazovce pod sebou */
.photos{margin:clamp(40px,6vw,72px) 0 clamp(40px,6vw,72px);max-width:900px}
.photos div{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photos.three{max-width:1100px}
.photos.three div{grid-template-columns:repeat(3,1fr)}
.photos img{display:block;width:100%;height:auto;background:var(--bar)}
.photos figcaption{font-size:var(--fs-s);margin-top:12px}
@media (max-width:600px){.photos div,.photos.three div{grid-template-columns:1fr}}

/* Události: dvě přepínací tlačítka, vybrané černé */
.tabs{display:flex;gap:8px;margin-bottom:clamp(28px,4vw,48px)}
.tabs button{font:inherit;font-size:var(--fs-s);color:var(--ink);background:var(--bar);border:0;border-radius:999px;min-height:36px;padding:0 16px;cursor:pointer;transition:transform .6s cubic-bezier(.22,1,.36,1),background-color .3s,color .3s}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--card)}
@media (hover:hover){.tabs button:hover{transform:translateY(-2px) scale(1.06);transition:transform .5s cubic-bezier(.22,1,.36,1),background-color .3s,color .3s}}
.tabs button:active{transform:scale(1.02);transition-duration:.15s}
.empty{font-size:var(--fs-s);color:var(--label)}
/* karta akce: plakát jako tlačítko, pod ním název a datum */
.event{display:inline-grid;gap:4px;width:min(320px,100%)}
.event-img{display:block;overflow:hidden;margin-bottom:10px;background:var(--bar)}
.event-img img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.event:hover .event-img img{transform:scale(1.03)}}
.event-name{font-weight:800;font-size:var(--fs-m)}
.event-date{font-size:var(--fs-s);color:var(--label)}

/* malá světle šedá poznámka o rekonstrukci, skoro splývá s pozadím */
.note{font-size:var(--fs-s);color:var(--muted);margin-top:clamp(32px,6vw,72px)}
.note a{color:var(--ink)}

/* Kontakt: první rámeček nahoře pod menu, druhý u spodního okraje; oba stejně široké */
.split{flex:1;display:flex;padding:clamp(16px,3vh,32px) 0 clamp(16px,4vh,40px)}
.split .wrap{display:grid;grid-template-rows:auto 1fr auto;width:fit-content;max-width:100%}
.split dl.card{grid-row:3}

/* zaoblené rámečky na Kontaktu, menším písmem */
.card{max-width:700px;padding:var(--card-pad);border-radius:16px;background:var(--card);font-size:var(--fs-xs);line-height:1.5;display:grid;gap:14px}
.card div{display:grid;grid-template-columns:9.5em 1fr;gap:4px 16px}
.card dt{color:var(--label)}
/* horní rámeček: popisek a e-mail pod sebou, stejné písmo jako údaje dole */
.card.reach{gap:4px;justify-items:start}
/* kurzor nad e-mailem: papír s tužkou (hrot tužky je místo kliknutí) */
.reach a{transition:color .3s;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 4h14v20H3z' fill='%23fff' stroke='%230a0a0a' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M6 9h8M6 12.5h8M6 16h4' stroke='%230a0a0a' stroke-width='1.3'/%3E%3Cpath d='M23 3.5l3.5 3.5-10 10-4.5 1 1-4.5z' fill='%23fff' stroke='%230a0a0a' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M20.5 6l3.5 3.5' stroke='%230a0a0a' stroke-width='1.5'/%3E%3C/svg%3E") 12 18,pointer}
@media (hover:hover){.reach a:hover{color:var(--label)}}
@media (max-width:480px){.card div{grid-template-columns:1fr;gap:0}}

/* nadpis jen pro čtečky obrazovky */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (max-width:720px){
  .bar{flex-direction:column;align-items:flex-start;gap:0;padding-top:6px;padding-bottom:6px}
  nav{justify-content:flex-start;gap:0 var(--gap-nav-s)}
  /* na telefonu ikona Instagramu vpravo v řádku s názvem */
  .bar{position:relative}
  .ig{position:absolute;right:0;top:6px}
}
/* při „Omezit pohyb“ zůstane plynulé zvětšení, jen bez nadzvednutí */
@media (prefers-reduced-motion:reduce) and (hover:hover){
  nav a:hover,.home:hover{transform:scale(1.08);transition:transform .5s cubic-bezier(.22,1,.36,1)}
}