:root{
  --noc:#0f0905; --panel:rgba(26,19,12,.82); --linka:rgba(214,189,120,.32);
  --zlato:#f3d28a; --zlato2:#c9a24d; --text:#e6ddc6; --tlumeny:#a79d86; --rubrika:#9b3a1c;
  --kapitalky:"Cinzel","EB Garamond",Georgia,serif; --serif:"EB Garamond",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--text); font-family:var(--serif); font-size:18px; line-height:1.55;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(155,90,30,.28), transparent 70%),
    linear-gradient(180deg, rgba(15,9,5,.55), var(--noc) 85%),
    url("/wlci2/img/stul.jpg") center top/cover fixed, var(--noc);
}
a{color:inherit; text-decoration:none}
.hlava{
  display:flex; align-items:center; justify-content:space-between; gap:1em; flex-wrap:wrap;
  max-width:1140px; margin:0 auto; padding:18px 20px;
}
.znacka{display:flex; align-items:center; gap:.6em; font-family:var(--kapitalky); font-weight:700; font-size:1.5em; letter-spacing:.08em; color:var(--zlato)}
.hlava nav{display:flex; gap:1.6em; flex-wrap:wrap; font-family:var(--kapitalky); font-size:.78em; letter-spacing:.12em; text-transform:uppercase}
.hlava nav a{color:var(--tlumeny); padding:.3em 0; border-bottom:2px solid transparent; transition:color .15s,border-color .15s}
.hlava nav a:hover,.hlava nav a:focus-visible{color:var(--zlato); border-color:var(--zlato2); outline:none}

main{max-width:1140px; margin:0 auto; padding:0 20px 40px}
.hrdina{text-align:center; padding:9vh 0 7vh}
.nadpis-maly{font-family:var(--kapitalky); letter-spacing:.3em; text-transform:uppercase; font-size:.8em; color:var(--zlato2); margin:0 0 1em}
h1{
  margin:0 0 .5em; font-family:"Cinzel Decorative","Cinzel",Georgia,serif; font-weight:700; line-height:1.1;
  font-size:clamp(2.2rem,7vw,4.6rem); color:var(--zlato); text-shadow:0 4px 24px rgba(0,0,0,.8), 0 0 40px rgba(214,150,50,.25);
}
.uvod{max-width:34em; margin:0 auto 1.8em; color:#d6ccb2; font-size:1.12em}
.uvod strong{color:var(--zlato); font-weight:600}
.tlacitka{display:flex; gap:.9em; justify-content:center; flex-wrap:wrap}
.tl{
  font-family:var(--kapitalky); letter-spacing:.1em; text-transform:uppercase; font-size:.82em; padding:.95em 1.8em;
  border:1px solid var(--linka); border-radius:4px; background:rgba(255,255,255,.06); color:#f0e3c0;
  transition:transform .15s, background .15s, box-shadow .15s;
}
.tl:hover,.tl:focus-visible{background:rgba(255,255,255,.12); transform:translateY(-2px); outline:none}
.tl-hlavni{background:linear-gradient(180deg,#b04624,#7d2a12); border-color:#d6a455; color:#fbe9bf; box-shadow:0 8px 24px rgba(155,58,28,.45)}
.tl-hlavni:hover,.tl-hlavni:focus-visible{background:linear-gradient(180deg,#c4532c,#8d3016)}

.dlazdice{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:860px){ .dlazdice{grid-template-columns:repeat(2,1fr)} }
.dl{
  position:relative; display:flex; flex-direction:column; padding:1.4em 1.4em 1.2em; border:1px solid var(--linka); border-radius:10px;
  background:linear-gradient(160deg, rgba(40,29,18,.9), rgba(18,13,8,.9)); backdrop-filter:blur(4px);
  box-shadow:0 10px 30px rgba(0,0,0,.45); transition:transform .18s, border-color .18s, box-shadow .18s; overflow:hidden;
}
.dl::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 90% 70% at 0% 0%, var(--ton,rgba(214,150,50,.18)), transparent 70%); pointer-events:none}
.dl:hover,.dl:focus-visible{transform:translateY(-4px); border-color:var(--zlato2); box-shadow:0 18px 40px rgba(0,0,0,.6); outline:none}
.dl h2{position:relative; margin:0 0 .3em; font-family:var(--kapitalky); font-size:1.3em; letter-spacing:.05em; color:var(--zlato)}
.dl p{position:relative; margin:0 0 1em; color:#cfc5ab; font-size:.95em; flex:1}
.dl-sip{position:relative; font-family:var(--kapitalky); font-size:.75em; letter-spacing:.14em; text-transform:uppercase; color:var(--zlato2)}
.dl-stitek{position:absolute; top:12px; right:12px; font-family:var(--kapitalky); font-size:.62em; letter-spacing:.14em; text-transform:uppercase; padding:.25em .7em; border-radius:99px; background:var(--rubrika); color:#fbe9bf}
.dl-vlci{--ton:rgba(180,80,30,.35); grid-column:span 2}
.dl-mc{--ton:rgba(70,160,70,.22)}
.dl-lab{--ton:rgba(120,90,200,.22)}
.dl-srazy{--ton:rgba(60,140,200,.22)}
.dl-rychlost{--ton:rgba(240,200,60,.22)}
@media (max-width:620px){ .dlazdice{grid-template-columns:1fr} .dl-vlci{grid-column:auto} body{font-size:17px} }

.pata{
  display:flex; justify-content:center; gap:1.2em 2.2em; flex-wrap:wrap; padding:26px 20px 34px; border-top:1px solid var(--linka);
  max-width:1140px; margin:0 auto; font-size:.8em; color:var(--tlumeny); font-family:var(--kapitalky); letter-spacing:.06em;
}
.pata b{color:var(--zlato); font-weight:600; font-variant-numeric:tabular-nums}
.pata a:hover{color:var(--zlato)}
@media (prefers-reduced-motion:reduce){ .tl,.dl{transition:none} .tl:hover,.dl:hover{transform:none} html{scroll-behavior:auto} }