/* Trimsy Studio – verze 2: web jako profil + syrový editorial */
:root{
  --paper:#f3f0e8;
  --paper2:#ebe6da;
  --ink:#141414;
  --ink2:#55524b;
  --line:#d9d3c4;
  --blue:#1f5bff;
  --blue-soft:#dfe7ff;
  --hand:"Caveat",cursive;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Inter Tight",system-ui,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--blue);color:#fff}
.col{width:min(940px,100% - 32px);margin-inline:auto}
.wide{width:min(1180px,100% - 32px);margin-inline:auto}

/* papírová textura, jemně */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .38 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- horní lišta ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(243,240,232,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .col{display:flex;align-items:center;justify-content:space-between;height:60px}
.top img{height:22px;width:auto}
.top nav{display:flex;gap:4px}
.top nav a{text-decoration:none;font-size:14px;font-weight:600;padding:8px 12px;border-radius:999px;color:var(--ink2)}
.top nav a:hover{background:var(--paper2);color:var(--ink)}
@media(max-width:620px){.top nav a:not(.dm){display:none}}
.top nav a.dm{background:var(--ink);color:var(--paper)}
.top nav a.dm:hover{background:var(--blue);color:#fff}

/* ---------- profil ---------- */
.profile{padding:44px 0 10px}
.p-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,6vw,80px);align-items:center}
.avatar{position:relative;width:clamp(96px,22vw,168px);aspect-ratio:1;border-radius:50%;padding:5px;background:conic-gradient(from 210deg,var(--blue),#7aa2ff,#ffd84d,#ff6b4a,var(--blue));cursor:pointer;border:0}
.avatar span{display:block;width:100%;height:100%;border-radius:50%;border:4px solid var(--paper);background:var(--ink) center/62% no-repeat;background-image:url(assets/media/logo.png)}
.avatar::after{content:"klikni";position:absolute;right:-6px;top:-10px;font-family:var(--hand);font-size:22px;color:var(--blue);transform:rotate(12deg)}
.p-name{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.p-name h1{font-family:var(--sans);font-size:22px;font-weight:600;margin:0;letter-spacing:-.01em}
.p-name .tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;margin-left:4px;vertical-align:2px}
.pbtn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:10px;border:0;background:var(--paper2);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.pbtn:hover{background:var(--line)}
.pbtn.primary{background:var(--blue);color:#fff}
.pbtn.primary:hover{background:#0d45e0}
.pbtn:active{transform:scale(.97)}
.p-stats{display:flex;gap:clamp(18px,4vw,40px);margin:18px 0 14px;padding:0;list-style:none}
.p-stats li{font-size:15px;color:var(--ink2)}
.p-stats b{display:block;color:var(--ink);font-size:clamp(17px,2.4vw,20px);font-weight:700}
.bio{font-size:15.5px;max-width:520px}
.bio strong{font-weight:600}
.bio a{color:#1d3a8a;font-weight:600;text-decoration:none}
@media(max-width:620px){
  .p-head{grid-template-columns:auto 1fr;align-items:start}
  .p-stats{gap:16px}
  .p-stats li{font-size:13px}
  .p-info{display:contents}
  .p-name{grid-column:2}
  .p-stats{grid-column:1/-1;justify-content:space-around;border-block:1px solid var(--line);padding:12px 0;margin:6px 0 0;text-align:center}
  .bio{grid-column:1/-1}
}

/* ---------- highlights ---------- */
.highlights{display:flex;gap:clamp(14px,3vw,30px);overflow-x:auto;padding:26px 4px 18px;scrollbar-width:none}
.highlights::-webkit-scrollbar{display:none}
.hl{flex:none;background:none;border:0;padding:0;cursor:pointer;text-align:center;width:84px}
.hl i{display:block;width:78px;height:78px;margin:0 auto 8px;border-radius:50%;padding:3px;background:var(--line);transition:transform .3s}
.hl.new i{background:conic-gradient(var(--blue),#7aa2ff,#ffd84d,#ff6b4a,var(--blue))}
.hl i span{display:block;width:100%;height:100%;border-radius:50%;border:3px solid var(--paper);background:var(--paper2) center/cover no-repeat}
.hl:hover i{transform:scale(1.06) rotate(-3deg)}
.hl b{font-size:12.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- záložky ---------- */
.tabs{display:flex;justify-content:center;gap:clamp(20px,8vw,70px);border-top:1px solid var(--line);margin-top:4px;position:sticky;top:60px;z-index:30;background:rgba(243,240,232,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tab{display:flex;align-items:center;gap:8px;padding:16px 2px 14px;border:0;background:none;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);cursor:pointer;border-top:1.5px solid transparent;margin-top:-1px}
.tab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.tab.on{color:var(--ink);border-top-color:var(--ink)}
.panel{display:none;padding:6px 0 60px;animation:fadeIn .5s ease}
.panel.on{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}}

/* mřížka videí */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:#222;border:0;padding:0;cursor:pointer}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile video{opacity:0;transition:opacity .25s}
.tile.playing video{opacity:1}
.tile .who{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.6);z-index:1}
.tile .who svg{width:14px;height:14px;fill:#fff}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 70%,rgba(0,0,0,.45));pointer-events:none}
.tile.pin::before{content:"📌";position:absolute;right:10px;top:8px;z-index:2;font-size:16px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
@media(hover:hover){.tile:hover img{filter:brightness(.9)}}

/* case studies jako příspěvky */
.posts{display:grid;gap:22px;padding-top:18px}
.post{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.post-h{display:flex;align-items:center;gap:10px;padding:12px 14px}
.post-h img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--paper2)}
.post-h b{font-size:14px}
.post-h small{display:block;color:var(--ink2);font-size:12px}
.post-media{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.post-media>*{width:100%;aspect-ratio:4/5;object-fit:cover;background:#111}
.post-media .shot{object-fit:contain;background:#f7f7f7;cursor:zoom-in}
.post-b{padding:14px 18px 20px}
.post-b .acts{display:flex;gap:14px;margin-bottom:10px}
.post-b .acts svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.8}
.post-b .acts .liked{fill:#ff3b5c;stroke:#ff3b5c;animation:like .5s ease}
@keyframes like{40%{transform:scale(1.3)}}
.post-b h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,38px);line-height:1.05;margin:4px 0 10px}
.post-b p{margin:0 0 10px;font-size:15.5px}
.nums{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 6px}
.nums div{font-size:13px;color:var(--ink2)}
.nums b{display:block;font-size:24px;color:var(--ink);letter-spacing:-.02em}
.tagline{color:#1d3a8a;font-size:14.5px}
@media(min-width:760px){.post{display:grid;grid-template-columns:1.05fr 1fr}.post-h{grid-column:1/-1;border-bottom:1px solid var(--line)}.post-media{grid-template-columns:1fr 1fr;align-self:start}}

/* ---------- editorial sekce (B) ---------- */
.ed{padding:clamp(70px,10vw,120px) 0;border-top:1px solid var(--line);position:relative}
.ed h2{font-family:var(--serif);font-weight:400;font-size:clamp(44px,8vw,96px);line-height:.95;letter-spacing:-.02em;margin:0 0 30px}
.ed h2 em{font-style:italic;color:var(--blue)}
.mark{position:relative;white-space:nowrap}
.mark::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-.08em;height:.32em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C60 6 120 4 180 8 S260 14 297 6' fill='none' stroke='%231f5bff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.65,0,.35,1) .2s}
.in .mark::after,.mark.in::after{transform:scaleX(1)}
.note{font-family:var(--hand);font-size:clamp(22px,2.6vw,28px);line-height:1.1;color:var(--blue);display:inline-block;transform:rotate(-3deg)}
.arrow{width:70px;height:46px;stroke:var(--blue);fill:none;stroke-width:2.2;stroke-linecap:round}

.duo{display:grid;gap:28px}
@media(min-width:820px){.duo{grid-template-columns:1fr 1fr;gap:50px}}
.polaroid{background:#fff;padding:12px 12px 16px;box-shadow:0 18px 40px -22px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.06);transform:rotate(var(--r,-2deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);position:relative}
.polaroid:hover{transform:rotate(0) scale(1.02)}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover}
.polaroid figcaption{font-family:var(--hand);font-size:26px;padding-top:10px;line-height:1.05}
.polaroid .tape{position:absolute;top:-12px;left:50%;width:110px;height:28px;margin-left:-55px;background:rgba(255,234,150,.75);transform:rotate(-4deg);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.person h3{font-family:var(--serif);font-weight:400;font-size:40px;margin:22px 0 6px}
.person .role{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.person p{margin:12px 0 0}

.how{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.how{grid-template-columns:1.1fr .9fr;gap:70px}}
.how ol{list-style:none;padding:0;margin:0;counter-reset:s}
.how li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:6px 16px;padding:20px 0;border-bottom:1px dashed var(--line)}
.how li::before{content:counter(s);grid-row:span 2;font-family:var(--serif);font-size:52px;line-height:.9;color:var(--blue)}
.how li b{font-size:19px}
.how li span{color:var(--ink2)}
.bts{position:relative}
.bts img{width:100%;border-radius:4px;aspect-ratio:4/5;object-fit:cover;filter:saturate(.95)}
.bts .note{position:absolute;left:-10px;bottom:-30px;background:var(--paper);padding:6px 12px}
.svc-inline{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.svc-inline span{padding:9px 16px;border:1.5px solid var(--ink);border-radius:999px;font-weight:600;font-size:14px}

.certs2{display:flex;align-items:center;gap:16px;margin-top:30px}
.certs2 img{width:64px;height:64px;border-radius:50%}
.certs2 p{margin:0;font-size:14.5px;color:var(--ink2)}

/* ---------- DM kontakt ---------- */
.dm-wrap{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.4)}
.dm-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.dm-h .av{width:40px;height:40px;border-radius:50%;background:var(--ink) center/62% no-repeat;background-image:url(assets/media/logo.png)}
.dm-h b{font-size:15px}
.dm-h small{display:block;color:#2bb35a;font-size:12px}
.chat{padding:18px;display:flex;flex-direction:column;gap:8px;min-height:180px}
.msg{max-width:82%;padding:10px 14px;border-radius:20px;font-size:15px;line-height:1.4;background:var(--paper2);align-self:flex-start;opacity:0;transform:translateY(8px) scale(.98);transition:opacity .4s,transform .4s}
.msg.show{opacity:1;transform:none}
.msg.me{align-self:flex-end;background:var(--blue);color:#fff}
.typing{align-self:flex-start;display:none;gap:4px;padding:12px 14px;border-radius:20px;background:var(--paper2)}
.typing.show{display:flex}
.typing i{width:7px;height:7px;border-radius:50%;background:#999;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);opacity:.5}}
.dm-form{border-top:1px solid var(--line);padding:14px 16px 16px;display:grid;gap:10px}
.dm-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.dm-form .row{grid-template-columns:1fr}}
.dm-form input,.dm-form textarea{width:100%;padding:12px 16px;border-radius:22px;border:1px solid var(--line);background:var(--paper);font:inherit;font-size:15px;outline:none;resize:none}
.dm-form input:focus,.dm-form textarea:focus{border-color:var(--blue);background:#fff}
.dm-form .bad{border-color:#e5484d;background:#fff5f5}
.dm-form .send{display:flex;gap:10px;align-items:flex-end}
.dm-form .send textarea{flex:1;min-height:48px;max-height:160px}
.dm-form button{flex:none;height:48px;padding:0 20px;border-radius:24px;border:0;background:var(--blue);color:#fff;font-weight:700;cursor:pointer}
.dm-form button:disabled{opacity:.6}
.dm-form .msgline{font-size:13px;color:var(--ink2);min-height:18px}
.dm-form .msgline.err{color:#c62828}
.direct{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:22px;font-size:15px}
.direct a{text-decoration:none;font-weight:600}
.direct a:hover{color:var(--blue)}

/* ---------- patička ---------- */
.foot{border-top:1px solid var(--line);padding:30px 0 40px;font-size:13px;color:var(--ink2)}
.foot .col{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between}
.foot a{text-decoration:none}

/* ---------- přehrávač stories ---------- */
.story{position:fixed;inset:0;z-index:200;background:#111;display:none;place-items:center}
.story.on{display:grid}
.st-frame{position:relative;width:min(100vw,calc(100svh * 9 / 16));height:min(100svh,calc(100vw * 16 / 9));background:#000;overflow:hidden}
@media(min-width:700px){.st-frame{height:min(92svh,860px);width:calc(min(92svh,860px) * 9 / 16);border-radius:14px}}
.st-bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.st-bars i{flex:1;height:2.5px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}
.st-bars i b{display:block;height:100%;width:0;background:#fff}
.st-top{position:absolute;top:22px;left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:3;color:#fff;font-size:14px;font-weight:600}
.st-top .av{width:32px;height:32px;border-radius:50%;background:#000 center/62% no-repeat;background-image:url(assets/media/logo.png);border:1px solid rgba(255,255,255,.4)}
.st-top button{margin-left:auto;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;line-height:1}
.st-slide{position:absolute;inset:0}
.st-slide img,.st-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-slide.contain img,.st-slide.contain video{object-fit:contain;background:#000}
.st-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),transparent 18%,transparent 62%,rgba(0,0,0,.55));pointer-events:none}
.st-text{position:absolute;left:22px;right:22px;bottom:70px;z-index:2;color:#fff}
.st-text h4{font-family:var(--serif);font-weight:400;font-size:clamp(30px,8vw,44px);line-height:1;margin:0 0 10px}
.st-text p{margin:0;font-size:16px;line-height:1.4}
.st-text .pill{display:inline-block;background:#fff;color:var(--ink);padding:10px 18px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;margin-top:16px}
.st-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:40px 30px;color:var(--ink);background:var(--paper)}
.st-card.blue{background:var(--blue);color:#fff}
.st-card h4{font-family:var(--serif);font-weight:400;font-size:clamp(36px,10vw,54px);line-height:.98;margin:0 0 18px}
.st-card ul{list-style:none;padding:0;margin:0;font-size:18px;display:grid;gap:10px}
.st-card li::before{content:"→ ";color:var(--blue)}
.st-card.blue li::before{color:#ffd84d}
.st-nav{position:absolute;inset:0;display:grid;grid-template-columns:1fr 2fr;z-index:2}
.st-nav button{background:none;border:0;cursor:pointer}
.st-sound{position:absolute;right:14px;bottom:18px;z-index:4;background:rgba(0,0,0,.45);border:0;color:#fff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer;display:none}
.st-sound.show{display:block}

/* lightbox */
.lb{position:fixed;inset:0;z-index:210;background:rgba(20,20,20,.92);display:none;place-items:center}
.lb.on{display:grid}
.lb video,.lb img{max-height:90svh;max-width:94vw;border-radius:10px}
.lb button{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:20px;cursor:pointer}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* přepínač verzí */
.versions{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:150;display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--ink);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.versions a{color:#fff;text-decoration:none;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;opacity:.7}
.versions a.on{background:#fff;color:var(--ink);opacity:1}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.msg{opacity:1;transform:none}}
.hl i span.kc{display:grid;place-items:center;color:#fff;font-weight:700;font-size:20px}
.st-slide.contain .st-text{background:rgba(10,10,10,.82);padding:16px 18px;border-radius:14px;bottom:40px}