/* Příběh St Paul's Knightsbridge: tmavá loď kostela, světlo vitráží klouže po stránce s rolováním */
@font-face{font-family:"Forum";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Forum/Forum-latin.woff2) format("woff2");unicode-range:U+0020-00FF,U+2013-201E,U+2026,U+20AC}
@font-face{font-family:"Forum";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Forum/Forum-latin-ext.woff2) format("woff2");unicode-range:U+010C-010F,U+011A-011B,U+0147-0148,U+0158-0159,U+0160-0161,U+0164-0165,U+016E-016F,U+017D-017E}

.kn{color-scheme:dark;--bg:#0f0c09;--bg-soft:#17120e;--ink:#f1e9db;--ink-2:#bcb09d;--ink-3:#8a7e6e;--line:rgba(241,233,219,.12);--line-strong:rgba(241,233,219,.26);--mint:#bea878;--mint-ink:#d9c79c;--marker:rgba(190,168,120,.3);--glow:rgba(190,168,120,.14);--glow-2:rgba(168,36,47,.1);--dot:rgba(241,233,219,.1);--card:#17120e;--card-2:#211a14;--shadow:0 34px 70px -34px rgba(0,0,0,.9);--shadow-s:0 22px 44px -30px rgba(0,0,0,.8);--win-ring:rgba(241,233,219,.1);--win-shadow:0 60px 110px -46px rgba(0,0,0,.95);--a-bar:#1d1712;--a-line:rgba(241,233,219,.1);--a-ink:#f1e9db;--a-mute:#a89c89;--a-dim:#75695b;--a-on-accent:#17120c;--f-kn:"Forum",Georgia,serif;--rubin:#a8242f;--kobalt:#23469f;--jantar:#e0a036;background:var(--bg);color:var(--ink);overflow-x:clip}
.kn .sv-fx{z-index:0}
.kn>section{position:relative;z-index:1}
.kn-sv{position:absolute;left:50%;top:50%;width:max(1050px,86vw);max-width:none;height:auto;margin:-34% 0 0 -43vw;opacity:.44;transform-origin:50% 50%;will-change:transform,opacity}
.kn :is(.cs-big,.sv-h2,.cs-h1,.sv-endh){font-family:var(--f-kn);font-stretch:normal;font-weight:400;letter-spacing:-.005em;text-transform:none}
.kn :is(.cs-big,.sv-h2,.cs-h1,.sv-endh) em{font:inherit;color:var(--mint);background:none;-webkit-text-fill-color:currentColor}
.sv-page.kn .sv-h2{font-size:clamp(2.2rem,1.3rem + 2.7vw,4.1rem);line-height:1.04}
.sv-page.kn .cs-big{max-width:15em;font-size:clamp(2.5rem,1.3rem + 3.9vw,5.2rem);line-height:1.02}
.sv-page.kn .sv-endh{font-size:clamp(2.3rem,1.4rem + 2.9vw,4.4rem);line-height:1.04}
.kn .pulse{background:var(--mint)}

/* ── Úvod: okno se třemi lomenými oblouky, světlo z něj padá na podlahu pod nadpisem ── */
.kn-hero{position:relative;display:flex;align-items:flex-end;min-height:100vh;padding:calc(var(--hl-h,80px) + 28px) 0 clamp(40px,6vh,76px);overflow:hidden;isolation:isolate}
@supports (height:100svh){.kn-hero{min-height:100svh}}
.kn-hero::before{content:"";position:absolute;z-index:-1;right:0;top:0;width:70%;height:100%;background:radial-gradient(60% 56% at 62% 48%,rgba(190,168,120,.16),transparent 72%);pointer-events:none}
.kn-hero-w{position:relative;width:100%}
.kn-hero-w>*{max-width:min(48%,640px)}
.kn-hero .cs-fa{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px clamp(20px,3vw,44px)}
.kn-hero .cs-fa dd{max-width:none}
.kn-hero .cs-kick{color:var(--mint-ink)}
.sv-page.kn .kn-hero .cs-h1{max-width:none;font-size:min(7rem,calc(var(--wrap)*.08));line-height:.98;letter-spacing:-.012em;white-space:nowrap;color:var(--ink)}
.kn-hero .cs-h1 .ln{padding-bottom:.12em;margin-bottom:-.12em}
.kn-hero .cs-sub{color:var(--ink-2)}
.kn-ok{position:absolute;right:max(5vw,calc(50% - var(--wrap)/2 + 12px));bottom:0;height:calc(100% - var(--hl-h,80px) - 22px);width:auto;max-width:min(48vw,calc(var(--wrap)*.52));aspect-ratio:900/1040;overflow:visible}
.kn-ok-z{fill:#1a140f}
.kn-ok-f{fill:none;stroke:var(--mint);stroke-width:1.5;stroke-opacity:.5}
.kn-ok-r{fill:none;stroke:var(--mint);stroke-width:1.5;stroke-opacity:.42}
.kn-ok-b{fill:none;stroke:#0f0c09;stroke-width:4;stroke-opacity:.72}
.kn-ok-q{opacity:.86}
.kn-ok-q .a{fill:url(#knSk1)}
.kn-ok-q .b{fill:url(#knSk2)}
.kn-ok-l image{transform-box:fill-box;transform-origin:50% 60%;animation:csZoom 9s var(--ease) both}
.kn-ok-l,.kn-ok-q{animation:knVst 1.1s var(--ease) .1s backwards}
.kn-ok-l.b{animation-delay:.24s}
.kn-ok-l.c{animation-delay:.38s}
.kn-ok-q{animation-delay:.6s}
@keyframes knVst{from{opacity:0}}

/* ── Web v akci ── */
.sv-page.sv-js.kn .cs-sc{height:calc(var(--vh)*2.5)}
.kn .sc-nb .sc-hl{aspect-ratio:1800/168}
.kn .sc-ob{background:#14100c}
.kn .sc-sb,.kn .sc-ub{background:#fff}

/* ── Výzva ── */
.kn-vy .cs-st li{border-color:var(--line);background:rgba(23,18,14,.72)}
.kn .cs-st b{font-family:var(--f-kn);font-weight:400;font-size:clamp(2.7rem,1.7rem + 2.8vw,4.5rem);letter-spacing:-.01em;color:var(--mint-ink)}
.kn .cs-st span{color:var(--ink-2)}

/* ── Týden: slunce nad sedmi oblouky a svíce u každé bohoslužby ── */
.sv-page.kn .kn-t{padding-bottom:clamp(36px,4.4vw,70px)}
.sv-page.kn .kn-p{padding-top:clamp(36px,4.4vw,70px);padding-bottom:clamp(36px,4.4vw,70px)}
.sv-page.kn .cs-do{padding-top:clamp(50px,6vw,96px)}
.kn-tp{--den:.5;position:relative;margin-top:clamp(24px,3vw,44px);padding:clamp(14px,2.4vw,34px);border:1px solid var(--line);border-radius:clamp(22px,3vw,34px);background:rgba(20,15,11,.84)}
.kn-ar{display:block;width:100%;height:auto;overflow:visible;font-family:var(--f-kn)}
.kn-ar .ob{fill:rgba(190,168,120,calc(.03 + .1*var(--den)));stroke:var(--mint);stroke-width:1.2;stroke-opacity:.4;transition:fill .25s,stroke-opacity .25s}
.kn-ar .ob.on{fill:rgba(190,168,120,calc(.07 + .2*var(--den)));stroke-opacity:.95}
.kn-ar .dr{fill:none;stroke:var(--mint);stroke-width:1.4;stroke-opacity:.5;stroke-dasharray:2 7;stroke-linecap:round}
.kn-ar .pdl{stroke:var(--mint);stroke-opacity:.3;stroke-width:1}
.kn-ar text{fill:var(--ink-2);font-size:27px;text-anchor:middle;transition:fill .2s}
.kn-ar text.on{fill:var(--ink)}
.kn-ar .sv{cursor:pointer}
.kn-ar .sv rect{fill:#e9dcc2;opacity:.42;transition:opacity .25s}
.kn-ar .sv ellipse{fill:#f3c463;opacity:.14;transform-box:fill-box;transform-origin:50% 100%;transition:opacity .25s,transform .25s var(--ease)}
.kn-ar .sv circle{fill:transparent}
.kn-ar .sv.e rect{fill:#a9c0ec}
.kn-ar .sv.e ellipse{fill:#8fb2ff}
.kn-ar .sv.u rect,.kn-ar .sv.t rect{fill:#f1e2c6}
.kn-ar .sv.dal rect{opacity:1}
.kn-ar .sv.dal ellipse{opacity:1;transform:scale(1.4)}
.kn-ar .sv:hover rect{opacity:1}
.kn-ar .bz{fill:url(#knPool)}
.kn-ar .sl{fill:#ffe9b0}
.kn-ar .sg{fill:url(#knZar)}
.kn-ar .ln{stroke:var(--ink);stroke-width:1;stroke-opacity:.26}
.kn-tc{display:flex;align-items:center;gap:10px;margin-top:clamp(10px,1.4vw,18px)}
.kn-r{flex:1;min-width:0;height:34px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.kn-r::-webkit-slider-runnable-track{height:2px;background:var(--line-strong)}
.kn-r::-moz-range-track{height:2px;background:var(--line-strong)}
.kn-r::-webkit-slider-thumb{width:22px;height:22px;margin-top:-10px;border:0;border-radius:50%;background:var(--mint);box-shadow:0 0 0 6px rgba(190,168,120,.2);-webkit-appearance:none;appearance:none}
.kn-r::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--mint);box-shadow:0 0 0 6px rgba(190,168,120,.2)}
.kn-r:focus-visible{outline:2px solid var(--mint-ink);outline-offset:4px;border-radius:6px}
.kn-b{display:inline-flex;align-items:center;justify-content:center;flex:none;height:38px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:none;color:var(--ink);font:500 13.5px/1 var(--f-body);cursor:pointer;transition:background .2s,color .2s}
.kn-b:hover{background:var(--ink);color:var(--bg)}
.kn-b.i{width:38px;padding:0}
.kn-b svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.kn-ti{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.1fr) minmax(0,1.04fr);gap:clamp(14px,2.4vw,40px);margin-top:clamp(14px,1.8vw,26px);padding-top:clamp(14px,1.8vw,24px);border-top:1px solid var(--line)}
.kn-ti>div{min-width:0}
.kn-ti small{display:block;margin-bottom:7px;font:500 11.5px/1.2 var(--f-mono);color:var(--ink-3)}
.kn-ti strong{display:block;font:400 clamp(1.45rem,1.05rem + .9vw,2.05rem)/1.1 var(--f-kn);color:var(--ink)}
.kn-ti .c strong::first-letter{text-transform:uppercase}
.kn-ti span{display:block;margin-top:5px;font:400 14.5px/1.35 var(--f-body);color:var(--ink-2)}
.kn-ti span.kn-w{display:inline-flex;margin:1px 0 0;padding:9px 18px;border:1.5px solid var(--mint);border-radius:999px;background:rgba(190,168,120,.14);font:400 15.5px/1.2 var(--f-kn);color:var(--ink)}
.kn-ro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px clamp(14px,2.4vw,40px);margin:clamp(14px,1.8vw,24px) 0 0;padding-top:clamp(12px,1.6vw,20px);border-top:1px solid var(--line)}
.kn-ro dt{margin-bottom:4px;font:500 13.5px/1.25 var(--f-body);color:var(--ink)}
.kn-ro dd{margin:0;font:400 13.5px/1.45 var(--f-body);color:var(--ink-2)}
.kn-po{margin:clamp(10px,1.2vw,14px) 0 0;font:400 12.5px/1.3 var(--f-body);color:var(--ink-3)}

/* ── Menu na půdorysu ── */
.kn-pp{margin-top:clamp(24px,3vw,44px);border:1px solid var(--line);border-radius:clamp(22px,3vw,34px);background:rgba(20,15,11,.82);overflow:hidden}
.kn-pn{display:flex;gap:2px;padding:10px clamp(12px,2vw,28px);overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.kn-pn::-webkit-scrollbar{display:none}
.kn-pn button{position:relative;flex:1 0 auto;height:48px;padding:0 12px;border:0;background:none;color:var(--ink-2);font:400 clamp(16.5px,1rem + .3vw,20px)/1 var(--f-kn);cursor:pointer;white-space:nowrap;transition:color .2s}
.kn-pn button::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1.5px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.kn-pn button:hover{color:var(--ink)}
.kn-pn button[aria-pressed="true"]{color:var(--ink)}
.kn-pn button[aria-pressed="true"]::after{transform:none}
.kn-pn button:focus-visible{outline:2px solid var(--mint-ink);outline-offset:-3px;border-radius:6px}
.kn-pg{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
.kn-pv{min-width:0;padding:clamp(14px,2.4vw,34px)}
.kn-pl{display:block;width:100%;height:auto;overflow:visible}
.kn-pl .kn-l path{fill:none;stroke:var(--mint);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.kn-pl .kn-l path.t{stroke-width:1;stroke-opacity:.5}
.sv-js .kn-pl .kn-l path{stroke-dasharray:1;stroke-dashoffset:1}
.is-in .kn-pl .kn-l path{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease-io)}
.kn-pl .kn-pw{fill:none;stroke:var(--mint);stroke-width:1;stroke-opacity:.28}
.kn-pl .kn-c{fill:var(--rubin);opacity:.72}
.kn-pl .kn-ps{fill:rgba(190,168,120,.5)}
.kn-pl .kn-ps.o{fill:none;stroke:var(--mint);stroke-width:1.1;stroke-opacity:.72}
.kn-pl .kn-pz{transition:transform .7s var(--ease);pointer-events:none}
.kn-pl .z{fill:rgba(190,168,120,0);stroke:var(--mint);stroke-opacity:0;stroke-width:1.2;cursor:pointer;transition:fill .25s,stroke-opacity .25s}
.kn-pl .z:hover{fill:rgba(190,168,120,.08)}
.kn-pl .z.on{fill:rgba(190,168,120,.13);stroke-opacity:.9}
.kn-pl .kn-pt{fill:var(--ink);font:400 21px/1 var(--f-kn);text-anchor:middle;paint-order:stroke;stroke:#14100c;stroke-width:5px;pointer-events:none}
.kn-k{display:flex;flex-direction:column;min-width:0;padding:clamp(18px,2.6vw,38px);border-left:1px solid var(--line)}
.kn-k small{font:500 11.5px/1.2 var(--f-mono);color:var(--mint-ink)}
.kn-k h3{margin:8px 0 0;font:400 clamp(2rem,1.3rem + 1.6vw,3rem)/1.04 var(--f-kn);color:var(--ink)}
.kn-k p{margin:12px 0 0;font:400 clamp(15px,.92rem + .2vw,16.5px)/1.55 var(--f-body);color:var(--ink-2)}
.kn-k ol{display:grid;gap:7px;margin:16px 0 0;padding:0;list-style:none}
.kn-k li{display:grid;grid-template-columns:62px 48px minmax(0,1fr);align-items:baseline;gap:6px;padding-top:7px;border-top:1px solid var(--line);font:400 14px/1.3 var(--f-body);color:var(--ink)}
.kn-k li b{font:400 18px/1 var(--f-kn);color:var(--mint-ink)}
.kn-k li i{font:500 11.5px/1 var(--f-mono);font-style:normal;color:var(--ink-3)}
.kn-k .po{margin-top:10px;font-size:12.5px;color:var(--ink-3)}
.kn-k.sv>*{animation:knK .42s var(--ease) backwards}
.kn-k.sv>:nth-child(2){animation-delay:.04s}
.kn-k.sv>:nth-child(3){animation-delay:.08s}
.kn-k.sv>:nth-child(4){animation-delay:.12s}
@keyframes knK{from{opacity:0;transform:translateY(8px)}}

/* ── Závěr: večer v lodi, u uličky hoří lucerny ── */
.kn .cs-do .sv-ol b{font-family:var(--f-body)}
.kn .sv-ol .ok{background:var(--mint)}
.kn-en{overflow:hidden;padding-bottom:clamp(90px,12vw,170px)}
.kn .kn-en .sv-endc{align-items:center;max-width:760px;padding:0;border:0;background:none;box-shadow:none;text-align:center}
.kn-lu{position:absolute;left:0;right:0;bottom:0;height:clamp(110px,16vw,220px);display:flex;align-items:flex-end;justify-content:space-around;padding:0 4vw;pointer-events:none}
.kn-lu i{width:clamp(70px,14vw,220px);aspect-ratio:1;margin-bottom:calc(clamp(35px,7vw,110px)*-1);border-radius:50%;background:radial-gradient(closest-side,rgba(243,196,99,.5),rgba(224,160,54,.14) 44%,transparent 72%);animation:knPla 4.4s ease-in-out infinite alternate}
.kn-lu i:nth-child(2n){animation-duration:5.6s;animation-delay:-1.4s}
.kn-lu i:nth-child(3n){animation-duration:3.8s;animation-delay:-2.4s}
@keyframes knPla{from{opacity:.62}to{opacity:1}}

/* ── Telefony a tablety ── */
@media (max-width:1199.98px){.kn-pg{grid-template-columns:minmax(0,1fr)}
.kn-k{min-height:250px;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:991.98px){.kn-hero{display:block;padding-top:calc(var(--hl-h,56px) + 16px);padding-bottom:40px}
.sv-page.kn .kn-hero .cs-h1{font-size:clamp(3.1rem,1.2rem + 9vw,5.4rem)}
.kn-ok{position:relative;right:auto;display:block;width:min(62vw,420px);height:auto;max-width:none;margin:0 auto 24px}
.kn-hero-w>*{max-width:none}
.kn-ti{grid-template-columns:repeat(2,minmax(0,1fr))}
.kn-ti .u{grid-column:1/-1}}
@media (max-width:767.98px){.kn-sv{width:760px;margin:-55vh 0 0 -380px;opacity:.42}
.kn-ok{width:min(74vw,330px)}
.kn-hero .cs-fa{grid-template-columns:repeat(2,minmax(0,1fr))}
.kn-ti,.kn-ro{grid-template-columns:minmax(0,1fr)}
.kn-tc{flex-wrap:wrap}
.kn-r{flex:1 0 100%}
.kn-pn{gap:0}
.kn-pn button{flex:none;padding:0 10px}
.kn-k{min-height:376px}
.kn-k li{grid-template-columns:54px 44px minmax(0,1fr)}
.kn-pl .kn-pt{font-size:30px}}
@media (prefers-reduced-motion:reduce){.kn-ok-l,.kn-ok-q,.kn-ok-l image,.kn-lu i{animation:none}
.sv-page.sv-js.kn .cs-sc{height:auto}
.sv-js .kn-pl .kn-l path{stroke-dashoffset:0}}
