/* Stew Sound – společné styly */

/* ===== EDIT: barvy a písmo ===== */
:root{
  --ink:#231f20; --white:#fff;
  --bottom:#007653;        /* spodní barva pozadí (konec obrázku images/background.jpg) */
  --font:"Information","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --navh:64px;             /* výška horního menu */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 16px);-webkit-text-size-adjust:100%;text-size-adjust:100%;min-height:100%}

/* ===== POZADÍ: jeden gradient přes celou stránku (shora krémová, dole zelená), bez předělů ===== */
body{font-family:var(--font);color:var(--ink);line-height:1.35;font-size:clamp(16px,1.1vw + 11px,18px);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  /* EDIT: filmové zrno je součástí pozadí – je statické a leží pod texty, fotkami i videi.
     Jeho sílu změníte výměnou images/grain.png, nebo ho vypnete smazáním první vrstvy (url(../images/grain.png) ...). */
  background:url(../images/grain.png) 0 0/192px 192px repeat,url(../images/background.jpg) center top/100% 100% no-repeat,var(--bottom);
  background-blend-mode:overlay,normal,normal}
main{flex:1}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
h2{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;font-size:clamp(34px,6vw,80px);margin-bottom:clamp(22px,4vw,44px);overflow-wrap:anywhere}
h3{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;overflow-wrap:anywhere}
section{padding:clamp(28px,5vw,64px) 0 clamp(56px,8vw,110px)}


/* ===== horní menu – zůstává nahoře i při rolování; barvu podkladu dopočítává js/site.js podle místa na stránce ===== */
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:env(safe-area-inset-top,0px);color:var(--ink);
  background:rgba(243,226,203,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.topnav .wrap{min-height:var(--navh);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 20px}
.topnav .brand{display:flex;align-items:center;gap:10px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(16px,1.6vw,20px);text-decoration:none;white-space:nowrap}
.topnav ul{display:flex;flex-wrap:wrap;gap:0 clamp(14px,2.5vw,30px);list-style:none;font-size:clamp(14px,1.2vw,16px)}
.topnav a{text-decoration:none}
.topnav ul a{display:inline-block;padding:10px 0}
.topnav ul a:hover,.topnav ul a:focus-visible,.topnav ul a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* ===== úvodní stránka – nízké hero, Recent works hned pod ním ===== */
.hero{padding:calc(var(--navh) + clamp(56px,15vh,170px)) 0 clamp(56px,11vh,130px)}
.hero .wrap{display:grid;gap:clamp(18px,3vw,40px);grid-template-columns:minmax(0,1fr);align-items:end}
.logo{line-height:0;font-size:0}
.ant-canvas{position:absolute;pointer-events:none}
.logo .sym-hit{pointer-events:all}
.logo svg{display:block;width:100%;max-width:min(760px,100%);height:auto;overflow:visible;color:var(--ink);opacity:.9}
.hero p{max-width:36ch;font-size:clamp(16px,1.2vw + 8px,22px);line-height:1.3}
@media(min-width:900px){.hero .wrap{grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr)}}

/* ===== ilustrace u nadpisů (z identity, strana 5) – EDIT: velikost = height ===== */
.sh{display:flex;flex-wrap:wrap;align-items:center;gap:.15em .3em}
.hicon{height:1.1em;width:auto;flex:none;opacity:.88}
svg.hicon{aspect-ratio:200/82;overflow:visible}
svg.hicon.ants{aspect-ratio:209/94}
.pluck{cursor:default}
h3.sh .hicon{height:1.5em}
/* People – tři sloupce vedle sebe, na mobilu pod sebou */
.people{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:minmax(0,1fr);margin-bottom:clamp(44px,6vw,80px)}
.people-block{margin-top:clamp(8px,2vw,24px)}
@media(min-width:700px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.people{grid-template-columns:repeat(4,minmax(0,1fr))}}
.person h3{font-size:clamp(22px,2.3vw,32px)}
.person .role{font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;opacity:.7;margin:6px 0 12px}
.person p{font-size:16px;line-height:1.45;max-width:46ch}
.person .links{display:flex;gap:16px;margin-top:12px;font-size:14px;font-weight:900;text-transform:uppercase}
.person .links a{text-decoration:none;border-bottom:2px solid currentColor}
.people-title{font-size:clamp(28px,4.2vw,56px);margin-bottom:clamp(18px,2.5vw,32px)}

/* ===== podstránky – menší nadpis, aby byl obsah vidět hned ===== */
.pagehead{padding:calc(var(--navh) + clamp(24px,5vh,56px)) 0 0}
.pagehead h1{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.88;font-size:clamp(32px,5.6vw,76px);overflow-wrap:anywhere;opacity:.9}
.flow.short{padding-top:clamp(20px,3vw,36px)}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,3.5vw,40px)}
.tabs a{border:2px solid var(--ink);padding:9px 16px;text-decoration:none;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(13px,1.1vw,15px)}
.tabs a:hover,.tabs a:focus-visible,.tabs a[aria-current=true]{background:var(--ink);color:#f3e2cb}
.more{display:inline-block;margin-top:clamp(28px,4vw,44px);font-weight:900;text-transform:uppercase;text-decoration:none;border-bottom:3px solid currentColor;padding-bottom:2px}

/* ===== karty filmů: max. 3 sloupce, na tabletu 2, na mobilu 1 ===== */
.grid{--cg:clamp(14px,2vw,28px);display:grid;gap:clamp(22px,2.6vw,36px) var(--cg);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,max(260px,calc((100% - 2 * var(--cg)) / 3))),1fr))}
.film{all:unset;box-sizing:border-box;cursor:pointer;display:block;min-width:0}
.film:focus-visible .th{outline:3px solid var(--ink);outline-offset:3px}
.film .th{aspect-ratio:16/9;background:var(--g);position:relative;color:var(--white);display:flex;align-items:flex-end;padding:12px;overflow:hidden}
.film .th b{position:relative;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;font-size:clamp(20px,2.2vw,30px);text-shadow:0 1px 12px rgba(0,0,0,.35);overflow-wrap:anywhere}
.film .tn{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.film:hover .tn{transform:scale(1.03)}
.film.hasimg .th b{display:none}
.film h3{font-size:clamp(17px,1.5vw,22px);margin-top:12px}
.film.wide{grid-column:1/-1;max-width:860px}
.film.wide h3{font-size:clamp(20px,2vw,28px)}
.clients{margin-top:clamp(40px,6vw,72px)}
.clients-title{font-size:clamp(22px,2.6vw,34px);margin-bottom:18px}
.clients ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:clamp(22px,2.6vw,34px) clamp(30px,3.6vw,52px);align-items:center;max-width:1100px}
.clients li{font-weight:900;text-transform:uppercase;font-size:clamp(15px,1.3vw,19px);letter-spacing:-.01em}
.clients img{display:block;height:calc(clamp(28px,2.8vw,38px)*var(--k,1));width:auto;max-width:240px;object-fit:contain;opacity:.9}
.clients a{text-decoration:none}
.film small{display:block;font-size:15px;opacity:.8;margin-top:4px;line-height:1.3}
.g0{--g:linear-gradient(180deg,#0c1520,#1673b8 60%,#e8d8de)}.g1{--g:linear-gradient(180deg,#ff9d1c,#e63a15 55%,#33201a)}
.g2{--g:linear-gradient(180deg,#f0262c,#8a2a6c 58%,#25143f)}.g3{--g:linear-gradient(180deg,#e0245e,#ff9d1c)}
.g4{--g:linear-gradient(180deg,#0a1a1a,#0a58c9 65%,#9db8f0)}.g5{--g:linear-gradient(180deg,#efe2c8,#0a7a46)}
.cat[hidden]{display:none}

/* ===== okno s trailerem – přehrává se přímo na stránce; vejde se na výšku i šířku ===== */
.modal{position:fixed;inset:0;z-index:200;background:rgba(15,13,14,.94);display:none;align-items:center;justify-content:center;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.modal.open{display:flex}
.dialog{width:min(1100px,100%,calc((100vh - 110px) * 16 / 9));width:min(1100px,100%,calc((100svh - 110px) * 16 / 9));color:var(--white)}
.dhead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dhead .cap{flex:1;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(15px,1.6vw,20px);min-width:0;overflow-wrap:anywhere}
.dbtn{flex:none;font:inherit;color:var(--white);background:none;border:2px solid rgba(255,255,255,.55);cursor:pointer;height:40px;min-width:40px;padding:0 12px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:900;text-transform:uppercase}
.dbtn:hover,.dbtn:focus-visible{background:var(--white);color:var(--ink);border-color:var(--white)}
.dbtn svg{width:16px;height:16px;flex:none}
.dbtn.x{font-size:26px;padding:0;width:40px;justify-content:center;font-weight:400}
.player{aspect-ratio:16/9;position:relative;background:#000;display:grid;place-items:center;text-align:center;padding:16px}
.player:fullscreen{aspect-ratio:auto;padding:0}
.player:-webkit-full-screen{aspect-ratio:auto;padding:0}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.player p{position:relative;font-weight:900;text-transform:uppercase;max-width:40ch}
@media(max-width:480px){.dbtn .lbl{display:none}}

/* ===== služby + studia ===== */
.intro{display:grid;gap:clamp(18px,3vw,48px);grid-template-columns:minmax(0,1fr);margin-bottom:clamp(32px,5vw,64px)}
@media(min-width:900px){.intro{grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);align-items:start}}
.lead2{font-size:clamp(18px,1.1vw + 10px,26px);line-height:1.25;max-width:42ch;letter-spacing:-.005em}
.small{font-size:15px;max-width:52ch}
.small h3{font-size:16px;margin-bottom:8px}
.small p{margin-bottom:8px}
.small .dh{margin-top:22px}
.deliv{list-style:none;padding:0;margin:0}
.deliv li{padding:5px 0;border-top:1px solid rgba(30,30,30,.15)}
.deliv li:last-child{border-bottom:1px solid rgba(30,30,30,.15)}
.studios-title{font-size:clamp(28px,4.2vw,56px);margin-bottom:clamp(14px,2vw,24px)}
.studio+.studio{margin-top:clamp(28px,4vw,52px)}
/* adresa studia pod nadpisem: odkaz na mapu, případně web */
.loc{display:flex;flex-wrap:wrap;gap:4px 20px;margin:-4px 0 14px;font-size:15px}
.loc a{text-underline-offset:3px;text-decoration-thickness:1px}
.loc a:first-child::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.45em;border:2px solid currentColor;border-radius:50% 50% 50% 0;transform:rotate(-45deg) translateY(-1px)}
.studio h3{font-size:clamp(20px,2.4vw,32px);margin-bottom:12px}
.sdesc{max-width:62ch;font-size:clamp(15px,.4vw + 13px,18px);line-height:1.4;margin:-2px 0 12px}
.shots{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shot{aspect-ratio:16/9;overflow:hidden;background:var(--g,#0c3d2c);position:relative}
.shot img{width:100%;height:100%;object-fit:cover}

/* ===== kontakt ===== */
.cbig{display:inline-block;max-width:100%;font-weight:900;letter-spacing:-.04em;line-height:.95;font-size:clamp(24px,6.6vw,96px);text-decoration:none;overflow-wrap:anywhere;margin-bottom:clamp(28px,5vw,56px)}
.cbig:hover{text-decoration:underline;text-underline-offset:8px}
.cgrid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));font-size:clamp(18px,1.4vw,22px)}
.cgrid b{display:block;font-weight:900;margin-bottom:4px;text-transform:uppercase;font-size:14px;opacity:.75}

/* patička bez pruhu: leží přímo na zeleném konci pozadí, proto světlý text a tenká linka */
footer{padding:20px 0 calc(24px + env(safe-area-inset-bottom,0px));font-size:14px;color:#f3e2cb}
footer .wrap{padding-top:18px;background:linear-gradient(rgba(243,226,203,.4),rgba(243,226,203,.4)) content-box top/100% 1px no-repeat}
footer .wrap{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap}
footer a{text-underline-offset:3px}
footer a{text-decoration:none}
footer .op{flex-basis:100%;font-size:12px;opacity:.75}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film .tn{transition:none}}