:root{
  --inkoust:#2e2116; --inkoust-bledy:#6a5540; --rubrika:#8c2812; --rubrika-tmava:#5f1a0b;
  --zlato-1:#f3d28a; --zlato-2:#b8893e; --zlato-3:#6f4e1d;
  --pergamen:#e3d1a9; --noc:#0f0905;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --kapitalky:"Cinzel","EB Garamond",Georgia,serif;
  --gotika:"UnifrakturMaguntia","Cinzel",Georgia,serif;
  --iniciala:"Cinzel Decorative","Cinzel",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--noc); color:var(--inkoust); font-family:var(--serif);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ---------- stul a svetlo ---------- */
.stul{
  position:fixed; inset:0; z-index:0;
  background:var(--noc) url("img/stul.jpg") center/cover no-repeat;
  filter:brightness(.62) saturate(.92);
}
.stul::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 75% 70% at 50% 50%, transparent 35%, rgba(8,4,2,.82) 100%);
}
.svetlo{
  position:fixed; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle at 88% 78%, rgba(255,170,80,.30) 0%, rgba(255,140,60,.12) 26%, transparent 55%);
  animation:mihotani 4.8s ease-in-out infinite;
}
@keyframes mihotani{0%,100%{opacity:.9}17%{opacity:1}33%{opacity:.8}58%{opacity:.97}79%{opacity:.86}}

/* ---------- scena ---------- */
.scena{
  position:relative; z-index:2; min-height:100vh; pointer-events:none;
  display:grid; place-items:center; padding:4vh 16px 6vh;
}
.posun{width:min(1180px,100%); pointer-events:auto; transition:transform 1s cubic-bezier(.45,.05,.3,1)}
@media (min-width:1100px){.posun{width:min(1180px, calc(100vw - 2 * min(27vh,260px) - 32px))}}
.scena[data-poloha="predek"] .posun{transform:translateX(-25%)}
.scena[data-poloha="zadek"] .posun{transform:translateX(25%)}
.kniha{margin:0 auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.7))}

/* ---------- listy ---------- */
.page{
  container-type:size; overflow:hidden; position:relative;
  background:var(--pergamen) url("img/pergamen.jpg") center/cover no-repeat;
}
.page.list.vlevo{box-shadow:inset -3.5cqw 0 3cqw -2cqw rgba(70,45,18,.55)}
.page.list.vpravo{box-shadow:inset 3.5cqw 0 3cqw -2cqw rgba(70,45,18,.55)}

.zahlavi{
  position:absolute; top:5.5cqh; left:11cqw; right:11cqw;
  display:flex; justify-content:space-between; align-items:baseline; gap:3cqw;
  font-family:var(--kapitalky); font-size:clamp(8px,2.2cqw,12px); letter-spacing:.16em; text-transform:uppercase;
  color:var(--inkoust-bledy); border-bottom:1px solid rgba(110,84,52,.35); padding-bottom:1.1cqh;
}
.zahlavi a{color:inherit; text-decoration:none}
.zahlavi a:hover{color:var(--rubrika)}

.text{
  position:absolute; top:13cqh; bottom:12cqh; left:11cqw; right:11cqw;
  font-size:clamp(11px,3.35cqw,19px); line-height:1.55; overflow:hidden;
}
.text h3{
  font-family:var(--kapitalky); font-weight:700; font-size:1.45em; letter-spacing:.08em;
  color:var(--rubrika); margin:0 0 .7em; text-wrap:balance; line-height:1.15;
}
.text p{margin:0 0 .75em}
.iniciala::first-letter{
  float:left; font-family:var(--iniciala); font-weight:700; color:var(--rubrika);
  font-size:3.3em; line-height:.8; padding:.06em .1em 0 0;
  text-shadow:0 0 0 var(--rubrika);
}
.rubrika{color:var(--rubrika); font-variant:small-caps; letter-spacing:.03em}
.kurziva{font-style:italic; color:var(--inkoust-bledy)}

.text a,.rubrika-odkaz{
  color:var(--rubrika); text-decoration:none; cursor:pointer;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px; background-position:0 92%; background-repeat:no-repeat;
  transition:background-size .35s ease, color .2s ease;
}
.text a:hover,.rubrika-odkaz:hover,.text a:focus-visible{background-size:100% 1px; color:var(--rubrika-tmava); outline:0}

/* obsah */
.rejstrik{list-style:none; margin:0 0 1em; padding:0}
.rejstrik li{display:flex; align-items:baseline; gap:.4em; margin:0 0 .42em}
.rejstrik li a{white-space:nowrap}
.rejstrik li i{flex:1; border-bottom:1px dotted rgba(90,66,40,.55); transform:translateY(-.25em)}
.fol-odkaz{font-family:var(--kapitalky); font-size:.7em; letter-spacing:.1em; color:var(--inkoust-bledy); white-space:nowrap}
.poznamka{font-size:.86em}

/* zvyky */
.zvyky{margin:.3em 0 .8em; display:grid; grid-template-columns:auto 1fr; gap:.35em 1em}
.zvyky dt{font-family:var(--kapitalky); font-size:.68em; letter-spacing:.12em; text-transform:uppercase; color:var(--rubrika); padding-top:.38em; white-space:nowrap}
.zvyky dd{margin:0}

/* Letopisy: zapisy pisare, kazdy jako samostatny odstavec s datem v rubrice. */
.letopisy p{margin:0 0 .55em; text-indent:0}
.letopisy p:last-child{margin-bottom:0}
.letopisy .rubrika{font-size:.78em}

/* pata */
.pata{
  position:absolute; bottom:5cqh; left:11cqw; right:11cqw;
  display:flex; justify-content:space-between; align-items:baseline;
}
.folio{font-family:var(--kapitalky); font-size:clamp(8px,2.2cqw,12px); letter-spacing:.14em; color:var(--inkoust-bledy)}
.reklamant{
  font-style:italic; font-size:clamp(10px,2.9cqw,16px); color:var(--inkoust-bledy);
  text-decoration:none; cursor:pointer; position:relative; padding-right:.2em;
}
.reklamant::after{content:" ~"; color:var(--rubrika)}
.reklamant:hover,.reklamant:focus-visible{color:var(--rubrika); outline:0}

/* titulni list */
.titulni .ornament{
  position:absolute; inset:3.5%; width:93%; height:93%; object-fit:fill;
  mix-blend-mode:multiply; opacity:.9; pointer-events:none;
}
.titul-obsah{
  position:absolute; inset:19cqh 19cqw 21cqh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:1.4cqh;
}
.velky-titul{
  font-family:var(--gotika); font-weight:400; font-size:clamp(26px,11cqw,68px); line-height:.95;
  color:var(--inkoust); margin:0;
}
.drobne{font-family:var(--kapitalky); font-size:clamp(8px,2.3cqw,12px); letter-spacing:.24em; text-transform:uppercase; color:var(--inkoust-bledy); margin:0; line-height:1.7}
.titul-obsah .kurziva{font-size:clamp(11px,3.4cqw,18px); margin:0}
.kolofon{font-style:italic; color:var(--inkoust-bledy); font-size:clamp(9px,2.9cqw,15px); line-height:1.35; margin:0; text-wrap:balance}
.svice-pozn{font-size:clamp(9px,2.6cqw,14px)!important; opacity:.8; margin-top:1cqh!important}

/* vlk jako maska */
.vlk{display:block; aspect-ratio:1; -webkit-mask:url("img/vlk.png") center/contain no-repeat; mask:url("img/vlk.png") center/contain no-repeat}
.vlk-inkoust{width:34cqw; background:var(--inkoust); opacity:.86}
.vlk-inkoust.maly{width:18cqw}
.vlk-zlaty{width:40cqw; background:linear-gradient(160deg,var(--zlato-1) 0%,var(--zlato-2) 45%,var(--zlato-3) 100%)}
.vlk-zlaty.maly{width:26cqw}

/* desky */
.desky{background:#3a2313 url("img/usne.jpg") center/cover no-repeat}
.desky::before{
  content:""; position:absolute; inset:4.5%; pointer-events:none;
  border:2px solid rgba(214,172,96,.55); outline:1px solid rgba(214,172,96,.28); outline-offset:6px;
  box-shadow:inset 0 0 0 1px rgba(40,20,6,.6);
}
.desky::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 40% 30%, rgba(255,210,140,.10), transparent 60%), linear-gradient(90deg, rgba(0,0,0,.35), transparent 8%)}
.desky.zadni::after{background:linear-gradient(270deg, rgba(0,0,0,.35), transparent 8%)}
.desky-obsah{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3cqh; text-align:center; z-index:2}
.zlato{
  font-family:var(--kapitalky); font-weight:700; font-size:clamp(24px,10cqw,62px); letter-spacing:.14em; line-height:1.1; margin:0;
  background:linear-gradient(170deg,var(--zlato-1) 10%,var(--zlato-2) 50%,var(--zlato-3) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.65));
}
.desky-pod{font-family:var(--kapitalky); letter-spacing:.3em; text-transform:uppercase; font-size:clamp(9px,2.6cqw,14px); color:#c9a764; margin:0; opacity:.85}
.otevrit{
  font-family:var(--serif); font-style:italic; font-size:clamp(12px,3.6cqw,20px);
  color:#e9cf93; text-decoration:none; cursor:pointer; letter-spacing:.04em;
  border-bottom:1px solid rgba(233,207,147,.35); padding-bottom:2px;
  animation:dech 3.2s ease-in-out infinite;
}
.otevrit:hover,.otevrit:focus-visible{color:#fff0c8; border-bottom-color:#fff0c8; outline:0}
@keyframes dech{0%,100%{opacity:.7}50%{opacity:1}}

/* predsadka */
.predsadka{
  background:#d9c49b url("img/pergamen.jpg") center/cover no-repeat;
}
.predsadka::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(90,45,20,.28), rgba(40,20,8,.18))}
.exlibris{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6cqh; text-align:center; z-index:2; padding:12cqw}
.exlibris-nadpis{font-family:var(--kapitalky); font-weight:700; letter-spacing:.14em; font-size:clamp(16px,6.5cqw,38px); color:var(--rubrika); margin:0}
.exlibris .kurziva{font-size:clamp(11px,3.4cqw,18px); margin:0}

/* zapis */
.uvod-zapisu{font-size:.95em}
.zapis{display:flex; flex-direction:column}
.zapis label{font-family:var(--kapitalky); font-size:.6em; letter-spacing:.16em; text-transform:uppercase; color:var(--inkoust-bledy); margin-top:.7em}
.zapis input{
  font:inherit; color:var(--inkoust); background:transparent; border:0;
  border-bottom:1px solid rgba(90,66,40,.55); padding:.15em .1em; border-radius:0;
}
.zapis input:focus{outline:0; border-bottom-color:var(--rubrika)}
.pecet{
  align-self:flex-start; margin-top:1.1em; font:inherit; font-style:italic; color:var(--rubrika);
  background:none; border:0; padding:0 0 0 1.7em; cursor:pointer; position:relative;
}
.pecet::before{
  content:""; position:absolute; left:0; top:50%; width:1.25em; height:1.25em; transform:translateY(-50%);
  border-radius:50%; background:radial-gradient(circle at 35% 30%, #c4462a, #7d1d0c 70%);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.pecet:hover,.pecet:focus-visible{color:var(--rubrika-tmava); outline:0; text-decoration:underline; text-decoration-thickness:1px}
.odpoved{margin:.6em 0 0; font-size:.85em; min-height:2.4em}

/* ---------- svicka ---------- */
.svicka{
  position:fixed; right:clamp(4px,2vw,40px); bottom:0; z-index:1;
  height:min(42vh,400px); cursor:pointer; outline:0;
}
.svicka img{height:100%; width:auto; display:block; filter:drop-shadow(0 0 18px rgba(255,160,70,.25))}
.svicka .zar{
  position:absolute; left:var(--plamen-x,50%); top:var(--plamen-y,10%);
  width:300%; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(255,214,140,.55) 0%, rgba(255,160,70,.22) 18%, transparent 52%);
  mix-blend-mode:screen; animation:plamen 2.1s ease-in-out infinite;
}
.svicka[aria-pressed="true"] .zar{animation-duration:3.4s; opacity:.55}
.svicka:focus-visible img{filter:drop-shadow(0 0 10px #ffd08a)}
@keyframes plamen{
  0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.95}
  21%{transform:translate(-50%,-52%) scale(1.07); opacity:1}
  44%{transform:translate(-50%,-49%) scale(.94); opacity:.82}
  68%{transform:translate(-50%,-51%) scale(1.03); opacity:.96}
}

/* ---------- stuhy: zalozky vedouci na portal ---------- */
.stuhy{
  position:fixed; left:0; top:50%; z-index:3;
  display:flex; flex-direction:column; gap:clamp(6px,1.3vh,13px);
  transform:translateY(-50%);
}
.stuha{
  position:relative; display:flex; align-items:center;
  padding:.6em 1.3em .6em 1.15em; margin-left:-10px;
  font-family:var(--kapitalky); font-weight:700; font-size:clamp(11px,1.35vw,13px);
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  color:#f3e3bd; text-decoration:none;
  clip-path:polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%);
  box-shadow:2px 4px 10px rgba(0,0,0,.55);
  transition:transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s ease, margin-left .28s ease;
}
.stuha:hover,.stuha:focus-visible{transform:translateX(12px); margin-left:0; box-shadow:4px 6px 16px rgba(0,0,0,.6); outline:0}
.stuha::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.16), transparent 40%);
}
.stuha-vstup{background:linear-gradient(135deg,#7a1f6e,#3d0f37)}
.stuha-vybava{background:linear-gradient(135deg,#5c4a2e,#2e2416)}
.stuha-stazeni{background:linear-gradient(135deg,#8a6a1c,#45340c)}
.stuha-hrdinove{background:linear-gradient(135deg,#8c2812,#4a1408)}
.stuha-postavy{background:linear-gradient(135deg,#6b2f8c,#3a1a4a)}
.stuha-mapa{background:linear-gradient(135deg,#3e5c2e,#1e2e15)}
.stuha-databaze{background:linear-gradient(135deg,#3e5566,#1c2933)}
.stuha-forum{background:linear-gradient(135deg,#2e4f5c,#152631)}

@media (max-width:760px){
  .scena{padding:2vh 10px 30vh}
  .scena[data-poloha] .posun{transform:none}
  .svicka{height:26vh; right:2px}
  .stuhy{top:auto; bottom:2px; transform:none; flex-direction:row; flex-wrap:wrap; justify-content:center; left:50%; translate:-50% 0; gap:5px; width:100%; padding:0 4px}
  .stuha{margin-left:0; padding:.45em .7em; clip-path:none; font-size:9.5px}
  .stuha:hover,.stuha:focus-visible{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .svetlo,.svicka .zar,.otevrit{animation:none}
  .posun{transition:none}
  .stuha{transition:none}
}
.stuha-zasah{background:linear-gradient(135deg,#b8871f,#6b4a0a)}