/* =====================================================
   Družstvo Kopaničiar — style.css (v4, „cinematic")
   Celoobrazovkový tmavý hero, pevné tenké lišty hore/dole,
   celostránkové menu, tmavé editoriálne sekcie s vlasovými linkami.
   Písma: Cormorant Garamond (serif) · Manrope (sans)
   ===================================================== */

:root{
    --bg:    #0E100D;
    --bg2:   #141712;
    --ivory: #EEE8DA;
    --ivory-d:#C8C2B3;
    --hair:  rgba(238,232,218,.16);
    --gold:  #D9A650;
    --serif: "Cormorant Garamond",Georgia,serif;
    --sans:  "Manrope",system-ui,sans-serif;
    --edge:  clamp(20px,4vw,56px);
    --track: .14em;
}

*{margin:0;padding:0;box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{transition:none!important;animation:none!important}
}
body{
    font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.75;
    color:var(--ivory);background:var(--bg);-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:opacity .2s ease}
a:hover{opacity:.7}
p a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
strong,b{font-weight:500;color:#F7F2E6}
::selection{background:var(--gold);color:var(--bg)}

/* ---------- lišty ---------- */
.bar{
    position:fixed;left:0;right:0;z-index:40;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:22px var(--edge);
    font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
    color:#F7F2E6;pointer-events:none;
}
.bar a,.bar button{pointer-events:auto}
.bar-top{top:0}
.bar-l{justify-self:start}.bar-c{justify-self:center}.bar-r{justify-self:end}
.bar-mail{font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;text-transform:lowercase;font-weight:400}
.bar-word{
    font-family:var(--sans);font-size:.9rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
    opacity:0;transition:opacity .35s ease;
}
body.scrolled .bar-word{opacity:1}
body.scrolled .bar-top{background:rgba(14,16,13,.96);border-bottom:1px solid var(--hair);padding-top:16px;padding-bottom:16px}
.bar-top{transition:background .3s ease,padding .3s ease}
.ham{display:flex;flex-direction:column;gap:6px;width:26px;background:none;border:0;cursor:pointer;padding:4px 0}
.ham span{display:block;height:1.5px;width:100%;background:currentColor;transition:transform .3s ease,opacity .3s ease}
body.menu-open .ham span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-open .ham span:nth-child(2){opacity:0}
body.menu-open .ham span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.bar-bottom{position:absolute;bottom:0;padding-bottom:26px}
body.menu-open .bar-bottom{visibility:hidden}
.bar-bottom a{font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.14em}
.scroll-hint{font-family:var(--sans);font-size:1rem;opacity:.7;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- celostránkové menu ---------- */
.overlay{
    position:fixed;inset:0;z-index:35;background:var(--bg);
    display:flex;flex-direction:column;justify-content:center;
    padding:0 var(--edge);
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s;
}
body.menu-open .overlay{opacity:1;visibility:visible;transition:opacity .35s ease}
.ov-nav{display:flex;flex-direction:column;gap:.35rem}
.ov-nav a{
    font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:400;
    letter-spacing:.04em;line-height:1.25;display:flex;align-items:baseline;gap:1.2rem;
    transform:translateY(12px);opacity:0;transition:transform .5s ease,opacity .5s ease;
}
body.menu-open .ov-nav a{transform:none;opacity:1}
body.menu-open .ov-nav a:nth-child(1){transition-delay:.05s}
body.menu-open .ov-nav a:nth-child(2){transition-delay:.1s}
body.menu-open .ov-nav a:nth-child(3){transition-delay:.15s}
body.menu-open .ov-nav a:nth-child(4){transition-delay:.2s}
body.menu-open .ov-nav a:nth-child(5){transition-delay:.25s}
body.menu-open .ov-nav a:nth-child(6){transition-delay:.3s}
body.menu-open .ov-nav a:nth-child(7){transition-delay:.35s}
.ov-nav small{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;color:var(--gold);font-weight:500}
.ov-foot a{text-decoration:none}
.ov-foot{position:absolute;bottom:26px;left:var(--edge);right:var(--edge);display:flex;justify-content:space-between;font-family:var(--sans);font-weight:500;letter-spacing:.08em;font-size:.9rem}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100dvh;width:100%;overflow:hidden;background:#000}
.hero picture{position:absolute;inset:0}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-art svg{width:100%;height:100%;display:block;transform:scale(1.04);animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translateX(-.6%)}to{transform:scale(1.04) translateX(.6%)}}
.mist{animation:mistmove 30s linear infinite alternate}
@keyframes mistmove{from{transform:translateX(-160px)}to{transform:translateX(160px)}}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,14,9,.66) 0%,rgba(10,14,9,.34) 32%,rgba(10,14,9,.30) 55%,rgba(10,14,9,.72) 100%)}
.hero-center{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero-center{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;pointer-events:none}
.hero-logo{
    font-family:var(--serif);font-weight:500;font-size:clamp(3rem,9vw,7.6rem);line-height:1;
    letter-spacing:.06em;color:#F7F2E6;text-shadow:0 8px 40px rgba(0,0,0,.6);
}
.hero-logo > span:not(.hero-logo-sm){color:var(--gold)}
.hero-logo-sm{display:block;color:#F7F2E6;font-size:.34em;letter-spacing:.34em;text-transform:uppercase;font-weight:400;margin-bottom:.35em}
.hero-tag{
    margin-top:1.4rem;font-family:var(--sans);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;
    color:rgba(238,232,218,.78);font-weight:400;
}

/* ---------- bloky ---------- */
.blk{padding:clamp(80px,11vw,140px) var(--edge);border-top:1px solid var(--hair)}
.blk-first{border-top:0}
.g{max-width:1240px;margin:0 auto}
.g + .g{margin-top:clamp(56px,7vw,96px)}
.g-gap{margin-top:clamp(56px,7vw,96px)}
.two{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.center{text-align:center}
.center-p{margin:0 auto}

.lab{
    font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--gold);font-weight:500;margin-bottom:1.3rem;
}
.lab-sm{margin-bottom:1rem;color:var(--ivory-d)}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.15;letter-spacing:.01em;color:#F7F2E6}
h2.big{font-size:clamp(2.6rem,6vw,5.2rem);line-height:1.05;letter-spacing:.005em;max-width:16ch}
h2 em,h2.big em{font-style:italic;color:var(--gold)}
h3{font-family:var(--serif);font-weight:500;font-size:1.55rem;margin:.4rem 0 .6rem;color:#F7F2E6}
.lead{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.55;max-width:56ch;margin-top:1.8rem;color:var(--ivory)}
.num{font-family:var(--serif);font-size:1.1rem;color:var(--gold);letter-spacing:.1em}
.col p:last-child{color:var(--ivory-d);font-size:.96rem}
.txt p,.txt-p{color:var(--ivory-d);margin-bottom:1.1rem;max-width:66ch;font-size:.98rem;line-height:1.8}
.txt p:first-child{color:var(--ivory)}
.txt-p{margin-bottom:1.4rem}

.dash{list-style:none;margin:1.4rem 0 1.4rem;border-top:1px solid var(--hair)}
.dash li{padding:.75rem 0;border-bottom:1px solid var(--hair);font-family:var(--sans);font-weight:500;font-size:.98rem;color:#EFEAE0}
.quote{
    font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.35;
    text-align:center;color:var(--gold);max-width:1240px;margin:clamp(56px,7vw,96px) auto 0;
    padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--hair);
}

.lines{list-style:none;border-top:1px solid var(--hair)}
.lines li{padding:.95rem 0;border-bottom:1px solid var(--hair);color:var(--ivory-d);font-size:.94rem;line-height:1.6}
.lines b{display:block;font-family:var(--sans);font-size:1rem;font-weight:600;color:#F7F2E6;margin-bottom:.2rem}

.lnk{
    display:inline-block;font-family:var(--sans);font-weight:600;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;color:#F7F2E6;
    border-bottom:1px solid var(--gold);padding-bottom:.3rem;
}
.lnk-btn{background:none;border:0;border-bottom:1px solid var(--gold);cursor:pointer;color:#F7F2E6;margin-top:1.4rem;transition:opacity .2s}
.lnk-btn:hover{opacity:.7}

.blk-list{background:var(--bg2)}
.blk-list h2{margin-bottom:1.4rem}
.blk-list .txt-p{max-width:72ch}

.faqs{border-top:1px solid var(--hair)}
.faq{border-bottom:1px solid var(--hair)}
.faq summary{
    cursor:pointer;list-style:none;position:relative;padding:1.05rem 2.4rem 1.05rem 0;
    font-family:var(--sans);font-size:.98rem;font-weight:600;line-height:1.5;color:#F7F2E6;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.95rem;font-family:var(--sans);font-weight:300;font-size:1.3rem;color:var(--gold)}
.faq[open] summary::after{content:"−"}
.faq p{padding:0 0 1.2rem;color:var(--ivory-d);font-size:.95rem;line-height:1.75;max-width:66ch}
.faq summary:hover{opacity:.75}

.kd{margin-top:1.6rem;border-top:1px solid var(--hair);max-width:34rem}
.kd dt{font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500;padding-top:.85rem}
.kd dd{font-family:var(--sans);font-weight:500;font-size:1.02rem;color:#F7F2E6;padding:.15rem 0 .85rem;border-bottom:1px solid var(--hair)}

.f-field{margin-bottom:1.2rem}
.frm label{display:block;font-size:.98rem;font-weight:600;color:#F7F2E6;margin-bottom:.45rem}
.req{font-weight:400;color:var(--ivory-d);font-size:.85rem}
.frm input,.frm textarea{
    width:100%;background:#F5F1E6;border:2px solid #F5F1E6;border-radius:8px;
    padding:.9rem 1rem;font-family:var(--sans);font-size:1.05rem;color:#1E241C;
}
.frm textarea{resize:vertical;min-height:130px}
.frm input:focus,.frm textarea:focus{outline:3px solid var(--gold);outline-offset:2px}
.frm ::placeholder{color:#8B8574}
.f-send{
    display:block;width:100%;margin-top:.4rem;cursor:pointer;
    background:var(--gold);color:#1E1A10;border:0;border-radius:8px;
    font-family:var(--sans);font-weight:700;font-size:1.1rem;padding:1rem 1.4rem;
    transition:background .15s ease;
}
.f-send:hover{background:#E7B765}
.f-note{font-size:.8rem;color:var(--ivory-d);margin-top:1rem;line-height:1.6}
.f-note a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold);color:var(--ivory)}
.f-ok{display:none;margin-top:1.1rem;padding:1rem 1.2rem;border-radius:8px;background:rgba(217,166,80,.14);border:1px solid var(--gold);font-size:.98rem;color:#F7F2E6}
.hp{position:absolute!important;left:-9999px!important;height:0;width:0;opacity:0}

/* ---------- päta ---------- */
.ft{padding:56px var(--edge) 34px;border-top:1px solid var(--hair);text-align:center}
.ft-word{font-family:var(--serif);font-size:2rem;letter-spacing:.1em;color:#F7F2E6;margin-bottom:1.2rem}
.ft-word span{color:var(--gold)}
.ft-kw{color:rgba(238,232,218,.45);font-size:.72rem}
.ft-l a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
.ft-l{font-size:.8rem;color:var(--ivory-d);letter-spacing:.04em;margin-bottom:.4rem}

/* ---------- responzivita ---------- */
@media (max-width:920px){
    .two{grid-template-columns:1fr;gap:1.6rem}
    .three{grid-template-columns:1fr;gap:2.4rem}
    .bar-mail{display:none}
    .bar-bottom .bar-c{display:none}
    .bar-bottom{grid-template-columns:1fr 1fr}
    .bar-bottom .bar-r{text-align:right}
    .bar-bottom a{font-size:.9rem;letter-spacing:.06em}
    .ov-foot{flex-direction:column;gap:.3rem;bottom:20px}
}
@media (max-width:560px){
    .bar{padding:16px var(--edge)}
    .hero-tag{letter-spacing:.18em;font-size:.66rem}
    .blk{padding:64px var(--edge)}
}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
    outline:1.5px solid var(--gold);outline-offset:3px;
}