/* Katova kaviareň — katovdom.sk
 *
 * Bolo to inline v <style> v index.html; obsah je nezmenený, len presunutý.
 * Žiadny externý font a žiadne @import — stránka nesmie volať von.
 * Písmo je systémový serifový stack (Iowan Old Style -> Palatino -> Georgia).
 *
 * POZOR na dve veci, ktoré sa tu už raz rozbili:
 *  - `overflow-x:hidden` na <body> ticho rozbíja `position:sticky` (body sa
 *    stane scroll kontajnerom). Horizontálne preteče rieši `overflow-x:clip`
 *    na <html>. Nevracať späť.
 *  - `prefers-reduced-motion` vypína aj animáciu hero-a; fotka a obsah musia
 *    byť bez nej rovno viditeľné (`both` by ich inak nechalo na opacity 0).
 */

:root{
  --ink:#14100D; --ink-2:#1C1611; --stone:#241C16; --line:#3A2E24;
  --parch:#F3EADB; --parch-dim:#C4B49B; --muted:#8E7C66;
  --gold:#D8B45A; --gold-deep:#A8842F; --blood:#9A2318;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --wrap:1140px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
/* NOTE: no overflow-x on <body>. `overflow-x:hidden` there computes overflow-y
   to auto, makes body a scroll container and silently breaks the sticky hero. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--ink);color:var(--parch);font-family:var(--serif);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;font-weight:600;
}
h1,h2,h3{font-weight:400;line-height:1.12;margin:0}
h2{font-size:clamp(1.9rem,4.2vw,2.9rem);letter-spacing:.01em}
.lead{font-size:clamp(1.05rem,2vw,1.22rem);color:var(--parch-dim);max-width:60ch}
.lead.cap::first-letter{
  float:left;font-size:3.5em;line-height:.78;padding:.06em .12em 0 0;
  color:var(--gold-deep);
}

/* ---------- paper grain over everything ---------- */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- the candle you carry ---------- */
.candle{
  position:fixed;inset:0;z-index:45;pointer-events:none;mix-blend-mode:screen;
  opacity:0;transition:opacity .6s ease;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,35%),
    rgba(255,206,120,.15),rgba(255,196,110,.055) 42%,transparent 72%);
}
.candle.on{opacity:1}

/* ---------- ornament that draws itself ---------- */
.flourish{
  display:block;width:240px;max-width:70%;height:24px;color:var(--gold-deep);
  opacity:.9;margin:26px 0;overflow:visible;
}
.flourish.center{margin-left:auto;margin-right:auto}
.flourish use{
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.8s ease;
}
.flourish.rise-in use{stroke-dashoffset:60}
html:not(.js) .flourish use{stroke-dashoffset:60}

/* ---------- reveal on scroll ---------- */
html.js [data-rise]{
  opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--i,0)*80ms);
}
html.js [data-rise].rise-in{opacity:1;transform:none}

/* ---------- scroll rail with the sword ---------- */
.rail{
  position:fixed;right:18px;top:96px;bottom:96px;width:1px;z-index:40;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--line) 10%,var(--line) 90%,transparent);
}
.rail .sw{
  position:absolute;left:50%;top:var(--sp,0%);width:18px;color:var(--gold);
  transform:translate(-50%,-50%);filter:drop-shadow(0 0 6px rgba(216,180,90,.45));
}
.rail .sw svg{width:18px;height:52px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
@media(max-width:1120px){.rail{display:none}}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:18px;
  padding:12px 24px;background:rgba(20,16,13,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .mark{display:flex;align-items:center;gap:11px;color:var(--gold);text-decoration:none}
.topbar .mark img{width:30px;height:30px;transition:transform .5s var(--ease)}
.topbar .mark:hover img{transform:rotate(-14deg)}
.topbar .mark b{font-weight:400;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--parch)}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--parch-dim);position:relative;padding-bottom:3px;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--gold)}
.nav a:hover::after{transform:scaleX(1)}
@media(max-width:860px){.nav a.hide-s{display:none}}
@media(max-width:480px){.topbar .mark b{display:none}}
.lang{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.lang button{
  background:none;border:0;color:var(--muted);font-family:var(--serif);font-size:.78rem;
  letter-spacing:.12em;padding:5px 10px;cursor:pointer;transition:background .2s,color .2s;
}
.lang button[aria-pressed="true"]{background:var(--gold-deep);color:var(--ink)}

/* ---------- hero ---------- */
/* Obyčajný hero cez celú obrazovku, bez pripnutia a bez dverí.
   2026-09-30: dvere (najprv celoobrazovkové, potom v otvore múru) aj celá
   scrollom riadená choreografia boli na pokyn majiteľa stromu odstránené —
   „junky", aj na telefóne. Zostala jedna animácia pri načítaní: fotka sa
   z tmy pomaly usadí, obsah vystúpi. Scroll len scrolluje. */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:120px 0 70px;overflow:hidden;
}
/* Fotka je v <picture> (WebP + JPEG), takže priame dieťa .hero je <picture>. */
.hero>picture{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.hero>picture>img{
  width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 45%;
  animation:settle 2.6s cubic-bezier(.2,.6,.2,1) both;
}
@keyframes settle{
  0%{opacity:0;transform:scale(1.07)}
  35%{opacity:1}
  100%{opacity:1;transform:none}
}
@media(max-height:720px){
  .hero{padding:84px 0 48px}
  .hero .seal{width:104px;margin-bottom:18px}
}
/* Spodok hero-a dobehne do farby, ktorou začína .threshold (#0B0806) — bez
   toho je medzi fotkou a stránkou ostrý rez. Predtým to robilo zatmenie
   pri scrollovaní; to je preč, tak to robí tento prechod. */
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,8,6,0),rgba(11,8,6,.75) 60%,#0B0806);
}
/* Vinieta: stredom je miestnosť vidieť, okraje a spodok tmavnú do stránky. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.72;
  background:
    radial-gradient(75% 60% at 50% 42%,rgba(20,16,13,.30),rgba(20,16,13,.9) 78%),
    linear-gradient(180deg,rgba(20,16,13,.8),rgba(20,16,13,.3) 30%,rgba(20,16,13,.97));
}

/* embers */
.embers{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.embers i{
  position:absolute;bottom:-14px;left:var(--x);width:var(--s,2px);height:var(--s,2px);
  border-radius:50%;background:#F2CC84;opacity:0;
  animation:rise var(--d,11s) linear var(--l,0s) infinite;
}
@keyframes rise{
  0%{opacity:0;transform:translate3d(0,0,0)}
  12%{opacity:.7}
  75%{opacity:.35}
  100%{opacity:0;transform:translate3d(var(--dx,16px),-78vh,0)}
}

/* Obsah vystúpi raz pri načítaní, tesne po tom, ako sa fotka začne usádzať. */
.hero .inner{
  position:relative;z-index:5;max-width:760px;padding:0 24px;
  animation:rise-in 1.2s .35s var(--ease) both;
}
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Mäkký tmavý kruh pod obsahom — kamenný múr na fotke je svetlý a zlatá
   pečať by sa v ňom stratila. */
.hero .inner::before{
  content:"";position:absolute;left:50%;top:50%;width:132%;height:134%;
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(14,10,7,.74),rgba(14,10,7,.42) 56%,transparent 79%);
}
.hero .seal{
  width:156px;color:var(--gold);margin:0 auto 30px;
  filter:drop-shadow(0 4px 26px rgba(0,0,0,.85));
  animation:press 1.15s var(--ease) both;
}
@keyframes press{
  0%{opacity:0;transform:scale(1.6) rotate(-14deg)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
.hero h1{font-size:clamp(2.6rem,8vw,4.6rem);letter-spacing:.005em;text-shadow:0 3px 24px rgba(0,0,0,.75)}
.hero .sub{margin:22px auto 0;color:var(--parch-dim);font-size:clamp(1.02rem,2.1vw,1.18rem);max-width:52ch}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.btn{
  display:inline-block;padding:13px 28px;text-decoration:none;font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--gold-deep);color:var(--gold);
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:var(--parch);border-color:var(--parch)}
/* Stav otvorenia. Bodka je červená; `.is-open` ju prepne na zelenú a rozsvieti.
   Farby sú vlastné premenné, nie `green`/`red` — musia sedieť do sviečkovej
   palety a byť čitateľné na tmavom kameni. */
.status{
  --dot:#C6483C;
  display:inline-flex;align-items:center;gap:10px;margin:26px auto 0;
  padding:7px 16px 7px 13px;border:1px solid var(--line);border-radius:999px;
  background:rgba(10,7,5,.55);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--parch-dim);
}
.status.is-open{--dot:#5FA860}
.status::before{
  content:"";width:9px;height:9px;border-radius:50%;flex:0 0 9px;
  background:var(--dot);box-shadow:0 0 0 3px color-mix(in srgb,var(--dot) 28%,transparent);
}
/* Tep len keď je otvorené — zatvorené nemá čím pulzovať. */
.status.is-open::before{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--dot) 28%,transparent)}
  50%    {box-shadow:0 0 0 7px color-mix(in srgb,var(--dot) 6%,transparent)}
}
@media(max-width:600px){.status{font-size:.7rem;letter-spacing:.1em;padding:6px 13px 6px 11px}}

.hours-chip{margin-top:30px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;
  color:var(--muted);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
}
.scroll-hint span{display:block;margin:8px auto 0;width:1px;height:26px;background:linear-gradient(180deg,var(--gold-deep),transparent);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* Na úzkej obrazovke je obsahu v hero viac, než sa doň zmestí: nadpis padne na
   dva riadky, tlačidlá sa postavia pod seba a „SEZÓNA…" sa zalomí tiež. Vycentrovaný
   blok potom prerastie dostupnú výšku a narazí do „OTVORTE DVERE", ktoré je
   pozicované ku spodku. Nebolo to vidieť, kým sa stránka nezmerala pri 390 px.

   Rieši sa to zmenšením obsahu, NIE schovaním pätky — a hero si pod sebou
   rezervuje miesto pre nápovedu, aby sa tie dve veci nemohli stretnúť. */
@media(max-width:600px){
  .hero{padding:96px 0 108px}
  .hero .seal{width:112px;margin-bottom:20px}
  .hero .sub{margin-top:16px}
  .cta{margin-top:26px;gap:10px}
  .hours-chip{margin-top:20px;font-size:.72rem;letter-spacing:.14em}
  .scroll-hint{bottom:18px;font-size:.6rem;letter-spacing:.2em}
  .scroll-hint span{height:20px;margin-top:6px}
}
/* Nízka obrazovka na šírku: nápoveda by sa tlačila do tlačidiel. Preč s ňou —
   kto má 430 px výšky, scrolluje aj bez pozvánky. */
@media(max-height:520px){
  .scroll-hint{display:none}
  .hero{padding:72px 0 40px}
}

/* ---------- prah ---------- */
/* Švík medzi hero a stránkou. Dohráva tmu z hero-a do pozadia stránky, takže
   prechod nie je useknutý rez, ale dopad. Ornament sa dokresľuje pri vstupe
   do záberu (rovnaký mechanizmus ako .flourish inde). */
.threshold{
  position:relative;height:clamp(96px,14vh,168px);
  display:grid;place-items:center;pointer-events:none;
  background:linear-gradient(180deg,#0B0806 0%,rgba(11,8,6,.55) 46%,var(--ink) 100%);
}
.threshold::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(720px,86vw);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);
  opacity:.5;
}
.threshold .flourish{margin:0;opacity:.55}

/* ---------- sections ---------- */
section{padding:clamp(64px,9vw,118px) 0;position:relative;scroll-margin-top:58px}
.band{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{max-width:66ch;margin-bottom:52px}
.note{
  margin-top:34px;padding:18px 22px;border-left:2px solid var(--gold-deep);
  color:var(--muted);font-size:.92rem;background:rgba(0,0,0,.2);max-width:78ch;
}

/* highlights */
/* minmax(min(100%,238px),1fr), nie minmax(238px,1fr): na úzkom displeji sa
   stopa vzdá svojho minima namiesto toho, aby pretiekla viewport. */
.picks{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr))}
/* Karta je stĺpec so ZNÁMYM spodkom: mriežka natiahne všetky karty v riadku
   na rovnakú výšku a .desc vyplní zvyšok, takže cena dosadne na tú istú linku
   vo všetkých kartách — bez ohľadu na to, aký dlhý je popis. */
.pick{
  display:flex;flex-direction:column;
  border:1px solid var(--line);padding:30px 26px;position:relative;
  background:linear-gradient(180deg,var(--stone),var(--ink-2));
  transition:border-color .25s,transform .3s var(--ease),box-shadow .3s;
}
.pick::before,.pick::after{
  content:"";position:absolute;width:24px;height:24px;border:1px solid var(--gold);
  opacity:0;transition:opacity .25s,transform .35s var(--ease);
}
.pick::before{top:9px;left:9px;border-right:0;border-bottom:0;transform:translate(-7px,-7px)}
.pick::after{bottom:9px;right:9px;border-left:0;border-top:0;transform:translate(7px,7px)}
.pick:hover{border-color:var(--gold-deep);transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.pick:hover::before,.pick:hover::after{opacity:.85;transform:none}
.pick .name{font-size:1.42rem;margin-bottom:6px;color:var(--parch)}
.pick .name.blood{color:#D8564A}
/* .desc rastie a tlačí cenu na spodok karty. Predtým tu bolo
   `min-height:3.2em`, čo je odhad — držal len dovtedy, kým sa niektorý popis
   nezalomí na štvrtý riadok, a s prvou kartou (má navyše „Odporúčame")
   nesedel vôbec. Ceny stáli v štyroch rôznych výškach. */
.pick .desc{color:var(--parch-dim);font-size:.93rem;flex:1 1 auto}
.pick .price{margin-top:16px;color:var(--gold);font-size:1.06rem;letter-spacing:.06em;transition:text-shadow .3s}
.pick:hover .price{text-shadow:0 0 18px rgba(216,180,90,.55)}
.pick .rec{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blood);display:block;margin-bottom:10px}
/* KAŽDÁ karta musí vydať všetky štyri sloty, aj keď je slot prázdny —
   chýbajúci slot je posunutý riadok. Prázdny „Odporúčame" drží svoj riadok
   nezlomiteľnou medzerou, takže názvy začínajú na tej istej linke. */
.pick .rec:empty::before{content:"\00a0"}

/* menu */
.menu{display:grid;gap:44px 56px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.menu>div{min-width:0}
.menu h3{
  display:flex;align-items:center;gap:11px;
  font-size:.82rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:6px;
}
.gl{
  width:20px;height:20px;flex:0 0 20px;color:var(--gold-deep);
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.menu .quip{color:var(--muted);font-size:.85rem;font-style:italic;margin:10px 0 16px}
.row{display:flex;align-items:baseline;gap:10px;padding:7px 0;transition:color .2s}
.row:hover{color:var(--parch)}
.row:hover .dots{border-bottom-color:var(--gold-deep)}
.row:hover .p{color:var(--parch)}
.row .n{min-width:0}
.row .d{color:var(--muted);font-size:.83rem;display:block;white-space:normal}
.row .dots{flex:1;min-width:18px;border-bottom:1px dotted #4C3D2D;transform:translateY(-4px);transition:border-color .2s}
.row .p{color:var(--gold);white-space:nowrap;font-size:.95rem;transition:color .2s}

/* gallery */
.gal{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
.gal figure{margin:0;overflow:hidden;background:var(--stone);position:relative;cursor:zoom-in}
.gal picture{display:block;width:100%;height:100%}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s}
.gal figure:hover img{transform:scale(1.05);filter:brightness(1.12)}
.gal figure::after{
  content:"";position:absolute;inset:9px;border:1px solid var(--gold);
  opacity:0;transform:scale(1.03);transition:opacity .3s,transform .4s var(--ease);pointer-events:none;
}
.gal figure:hover::after{opacity:.65;transform:none}
.gal .tall{grid-row:span 2}
.gal .wide{grid-column:span 2}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}.gal .tall{grid-row:span 1}}
blockquote.plaque{
  margin:52px auto 0;max-width:64ch;text-align:center;color:var(--parch-dim);
  font-size:1.06rem;font-style:italic;line-height:1.75;
}
blockquote.plaque cite{display:block;margin-top:16px;font-style:normal;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:80;background:rgba(10,8,6,.95);
  display:flex;align-items:center;justify-content:center;flex-direction:column;padding:56px 20px;
  animation:fadein .3s ease;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.lb img{max-width:min(1200px,94vw);max-height:80vh;object-fit:contain;border:1px solid var(--line)}
.lb .cap{color:var(--parch-dim);font-size:.9rem;margin:16px 0 0;text-align:center;max-width:60ch}
.lb button{
  position:absolute;background:none;border:1px solid var(--line);color:var(--parch-dim);
  font-family:var(--serif);cursor:pointer;transition:border-color .2s,color .2s;
}
.lb button:hover{border-color:var(--gold);color:var(--gold)}
.lb .x{top:20px;right:20px;width:44px;height:44px;font-size:1.5rem;line-height:1}
.lb .p,.lb .n2{top:50%;transform:translateY(-50%);width:46px;height:64px;font-size:1.7rem;line-height:1}
.lb .p{left:18px}
.lb .n2{right:18px}
@media(max-width:640px){.lb .p,.lb .n2{display:none}}

/* find us */
.find{display:grid;gap:44px;grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:940px){.find{grid-template-columns:1fr}}
.facts{margin:34px 0 0}
.facts dt{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:26px}
.facts dt:first-child{margin-top:0}
.facts dd{margin:7px 0 0;font-size:1.05rem;color:var(--parch-dim)}
.todo{color:var(--blood);border-bottom:1px dashed var(--blood)}

/* Ikony sociálnych sietí. Kotva je 42×42 — palec potrebuje aspoň 40 px,
   a samotná ikona má 24. Záporný margin vracia prvú ikonu na zvislicu
   ostatného textu, ktorú by inak odsadenie kotvy posunulo. */
.social{display:flex;align-items:center;gap:4px;margin-left:-9px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px}
.soc{
  width:24px;height:24px;color:var(--gold-deep);
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:color .2s,transform .25s var(--ease);
}
.social a:hover .soc,.social a:focus-visible .soc{color:var(--gold);transform:translateY(-2px)}
/* V lište sú menšie a bez záporného odsadenia; dotykový cieľ zostáva 40 px. */
.social-bar{margin-left:4px;gap:0}
.social-bar a{width:40px;height:40px}
.soc-sm{width:19px;height:19px}
/* Pod 560 px sa lišta zužuje a ikony by sa bili s prepínačom jazyka.
   V kontakte sú tak či tak. */
@media(max-width:560px){.social-bar{display:none}}

/* the drawn map */
.mapcard{margin:0;border:1px solid var(--line);background:var(--ink);padding:10px}
.mapcard svg.plan{display:block;width:100%;height:auto}
.mapcard figcaption{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;
  padding:14px 10px 6px;border-top:1px solid var(--line);margin-top:8px;
  font-size:.84rem;color:var(--muted);
}
.mapcard figcaption a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-deep)}
.mapcard figcaption a:hover{color:var(--parch);border-bottom-color:var(--parch)}
.mapcard figcaption .sep{margin-left:auto}

/* map internals */
.plan .land{fill:#16110E}
.plan .open{fill:#2F251A;stroke:#3D3021;stroke-width:1}
.plan .street{fill:none;stroke:#2F251A;stroke-linecap:round;stroke-linejoin:round}
.plan .kerb{fill:none;stroke:#3D3021;stroke-width:1;stroke-linecap:round}
.plan .block{fill:#1E1811;stroke:#2C2219;stroke-width:1}
.plan .castle{fill:#2A2118;stroke:var(--gold-deep);stroke-width:1.4;stroke-linejoin:round}
.plan .us{fill:#4A3618;stroke:var(--gold);stroke-width:1.8}
.plan .route{
  fill:none;stroke:#E8C46E;stroke-width:3.2;stroke-dasharray:4 7;stroke-linecap:round;
  animation:march 12s linear infinite;
}
@keyframes march{to{stroke-dashoffset:-220}}
.plan .lbl{
  fill:#9C8970;font-family:var(--serif);font-size:15px;
  letter-spacing:2px;text-transform:uppercase;
}
.plan .lbl.big{fill:var(--parch-dim);font-size:17px}
.plan .lbl.gold{fill:var(--gold);font-size:17px}
.plan .lbl.sm{font-size:13px}
.plan .pin{fill:var(--gold);stroke:#14100D;stroke-width:1.6}
.plan .pinpulse{
  fill:none;stroke:var(--gold);stroke-width:1.8;opacity:0;
  transform-origin:337px 200px;animation:pulse 3s ease-out infinite;
}
@keyframes pulse{0%{opacity:.85;transform:scale(.3)}70%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}
.plan .rose{fill:none;stroke:#5A4832;stroke-width:1.3}
.plan .scale{fill:none;stroke:#5A4832;stroke-width:1.3}
@media(max-width:640px){
  .mapcard{padding:6px}
  .mapcard figcaption{gap:6px 16px;padding:12px 4px 4px}
  .mapcard figcaption .sep{margin-left:0}
  .plan .m-hide{display:none}
  .plan .lbl{font-size:21px;letter-spacing:1.4px}
  .plan .lbl.sm{font-size:19px}
  .plan .lbl.gold,.plan .lbl.big{font-size:23px}
  .plan .lbl.legend{font-size:17px}
  .plan .route{stroke-width:4}
}

/* ---------- udalosti ---------- */
/* Karta vydá vždy päť slotov (obrázok, meta, nadpis, perex, odkaz). V zozname
   sú na subgride, takže nadpisy, perexy aj odkazy susedných kariet stoja na
   tej istej čiare bez ohľadu na dĺžku textu — pravidlo stromu o zarovnaní. */
.ev-card{display:grid;grid-template-rows:auto auto auto 1fr auto;align-content:start;gap:0}
.ev-img{display:block;aspect-ratio:1200/630;overflow:hidden;background:var(--stone);border:1px solid var(--line)}
.ev-img img,.ev-img picture{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.ev-card:hover .ev-img img{transform:scale(1.04)}
.ev-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:18px 0 0;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ev-state{color:var(--ink);background:var(--gold);padding:3px 9px 2px;letter-spacing:.16em;font-weight:600}
.ev-card.is-past .ev-state,.ev-state.is-past{background:transparent;color:var(--parch-dim);box-shadow:inset 0 0 0 1px var(--line)}
.ev-title{font-size:clamp(1.35rem,2.4vw,1.7rem);margin:12px 0 0;text-wrap:balance}
.ev-title a{text-decoration:none}
.ev-title a:hover{color:var(--gold)}
.ev-sum{margin:10px 0 0;color:var(--parch-dim)}
.ev-more{margin:16px 0 0;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.ev-more a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-deep);padding-bottom:3px}
.ev-more a:hover{color:var(--parch);border-color:var(--parch)}

/* homepage: nadpis vľavo, jedna karta vpravo */
.ev-feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:start}
.ev-feature .head{margin-bottom:0}
.ev-all{margin:26px 0 0}
@media(max-width:820px){.ev-feature{grid-template-columns:1fr}}

/* /udalosti/ */
.ev-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));
  grid-auto-rows:auto;column-gap:clamp(24px,4vw,48px);row-gap:64px}
.ev-list .ev-card{grid-row:span 5;grid-template-rows:subgrid}

/* podstránky */
.page{padding:clamp(104px,14vw,140px) 0 clamp(64px,9vw,110px)}
.page h1{font-size:clamp(2.2rem,5.4vw,3.6rem);text-wrap:balance}
.page .head .ev-meta{margin:0 0 18px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 34px;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.crumbs a{text-decoration:none;color:var(--parch-dim)}
.crumbs a:hover{color:var(--gold)}
.crumbs [aria-current]{color:var(--gold)}
.nav a[aria-current]{color:var(--gold)}

.ev-banner{margin:0 0 clamp(36px,5vw,56px);border:1px solid var(--line);aspect-ratio:1200/630;overflow:hidden;background:var(--stone)}
.ev-banner img,.ev-banner picture{width:100%;height:100%;object-fit:cover;display:block}
.ev-body{font-size:1.08rem;color:var(--parch-dim)}
/* text drží šírku na čítanie, galéria ide na celú šírku stránky */
.ev-body>*{max-width:68ch}
.ev-body>.ev-gal{max-width:none}
.ev-body>p,.ev-body>ul{margin:0 0 1.1em}
.ev-body .ev-h{font-size:clamp(1.4rem,2.6vw,1.8rem);color:var(--parch);margin:1.8em 0 .7em}
.ev-quote{margin:1.4em 0}
.ev-quote cite{display:block}
.ev-links{list-style:none;padding:0;margin:1.2em 0 0;display:grid;gap:10px}
.ev-links a,.ev-note a{color:var(--gold);text-underline-offset:4px}
.ev-links a::after{content:" ↗";font-size:.85em}
.ev-drinks{list-style:none;padding:0;display:grid;gap:12px}
.ev-drinks li{padding-left:22px;position:relative}
.ev-drinks li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--gold)}
.ev-drinks b{font-weight:400;color:var(--parch)}
.ev-drinks span{display:block;font-size:.95rem;color:var(--muted)}
.ev-note{font-size:.92rem}
.ev-gal{max-width:none;grid-template-columns:repeat(3,1fr)}
.ev-gal figure{aspect-ratio:3/2}
@media(max-width:820px){.ev-gal{grid-template-columns:repeat(2,1fr)}}
.ev-back{margin:clamp(40px,6vw,64px) 0 0}

footer{border-top:1px solid var(--line);padding:56px 0 68px;color:var(--muted);font-size:.86rem}
footer .cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
[hidden]{display:none!important}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .embers,.candle,.scroll-hint span{display:none!important}
  .status.is-open::before{animation:none!important}
  .hero>picture>img,.hero .inner{opacity:1!important;transform:none!important}
  html.js [data-rise]{opacity:1!important;transform:none!important}
  .flourish use{stroke-dashoffset:60!important}
  .hero .seal{opacity:1!important;transform:none!important}
}
