/* P.D.design – v0.6
   Layout: the grey drafting board of today's site. The renders lead, text is large and sparse and
   comes only from the current site. One light theme that turns to night for the "Spolupráca" section. */
:root{
  --board:#cccccc;      /* signature grey of the current site */
  --board-2:#d6d6d6;
  --paper:#ffffff;
  --ink:#1f1f1f;
  --ink-2:#4a4a4a;      /* secondary text, 6:1 on --board */
  --line:rgba(31,31,31,.24);
  --night:#1c1c1c;
  --night-ink:#ededed;
  --night-2:#a9a9a9;
  --night-line:rgba(237,237,237,.18);
  --shadow:rgba(0,0,0,.28);
  --scrim:rgba(20,20,20,.97);

  /* live colours: these flip when the page turns to night */
  --bg:var(--board);
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --rule:var(--line);

  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --track:.22em;        /* the wide uppercase tracking of today's menu */

  --sheet:1320px;
  --gl:max(clamp(16px,4.5vw,72px),env(safe-area-inset-left,0px));
  --gr:max(clamp(16px,4.5vw,72px),env(safe-area-inset-right,0px));
  --nav-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
html.night{--bg:var(--night);--fg:var(--night-ink);--fg-2:var(--night-2);--rule:var(--night-line)}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){html:not(.anim){scroll-behavior:smooth}}
html{scroll-padding-top:var(--nav-h)}
html.lock{overflow:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.6 var(--sans);letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;transition:background-color .8s ease,color .8s ease}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.label{font:600 .72rem/1.3 var(--sans);letter-spacing:var(--track);text-transform:uppercase}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.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}
.band{padding-left:var(--gl);padding-right:var(--gr)}
.sheet{max-width:var(--sheet);margin-inline:auto}
.logo-light{display:none}
html.night .topbar .logo-dark{display:none}
html.night .topbar .logo-light{display:block}

/* Text link with a drawn underline */
.tlink{display:inline-flex;align-items:center;gap:12px;padding:10px 0;border:0;background:none;cursor:pointer;text-decoration:none;
  font:600 .76rem/1 var(--sans);letter-spacing:var(--track);text-transform:uppercase;position:relative}
.tlink::after{content:"";position:absolute;left:0;right:var(--track);bottom:4px;height:1px;background:currentColor}
.tlink:hover::after{animation:redraw .7s var(--ease) forwards}
@keyframes redraw{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 34px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);
  font:600 .78rem/1 var(--sans);letter-spacing:var(--track);text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:transparent;color:var(--fg)}
.btn[disabled]{cursor:progress;opacity:.7}
.icon-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule);background:transparent;border-radius:50%;cursor:pointer;color:var(--fg);transition:background .2s,color .2s,opacity .2s}
.icon-btn:hover{background:var(--fg);color:var(--bg)}
.icon-btn[disabled]{opacity:.3;pointer-events:none}
.icon-btn svg{width:18px;height:18px}

/* Word masks for heading reveals (built by script) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .08em;margin:-.12em 0 -.08em}
.wi{display:inline-block;will-change:transform}

/* ───────── Opening curtain (only with motion) ───────── */
.curtain{display:none}
html.anim .curtain{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--board);
  animation:curtain-failsafe 0s linear 5s forwards}
.curtain img{width:clamp(110px,12vw,170px)}
@keyframes curtain-failsafe{to{visibility:hidden}}

/* ───────── Top bar ───────── */
.topbar{position:fixed;inset:0 0 auto;z-index:70;padding-top:env(safe-area-inset-top,0px);background:var(--bg);transition:translate .5s var(--ease),background-color .8s ease}
.topbar.is-hidden{translate:0 -101%}
.topbar-in{height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.brand{justify-self:start;display:block}
.brand img{height:38px;width:auto}
.links{display:flex;gap:clamp(10px,2.6vw,38px)}
.links a{position:relative;display:block;padding:12px 2px;text-decoration:none;font:500 .74rem/1.2 var(--sans);letter-spacing:var(--track);text-transform:uppercase}
.links a::after{content:"";position:absolute;left:2px;right:calc(2px + var(--track));bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.links a:hover::after,.links a.is-active::after{transform:scaleX(1)}
.menu-btn{display:none;justify-self:end;align-items:center;gap:10px;min-height:44px;padding:0 2px;border:0;background:none;cursor:pointer;font:600 .72rem/1 var(--sans);letter-spacing:var(--track);text-transform:uppercase}
.menu-btn svg{width:22px;height:22px}
.progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
.progress i{display:block;height:100%;background:var(--fg);transform:scaleX(var(--p,0));transform-origin:left}

.menu{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:var(--board);color:var(--ink);
  padding:calc(env(safe-area-inset-top,0px) + 10px) var(--gr) calc(env(safe-area-inset-bottom,0px) + 28px) var(--gl);opacity:0;transition:opacity .35s ease}
.menu.open{opacity:1}
.menu-top{display:flex;justify-content:space-between;align-items:center;height:var(--nav-h)}
.menu-top img{height:38px;width:auto}
.menu-links{margin-block:auto;display:grid;gap:4px}
.menu-links a{display:block;padding:6px 0;text-decoration:none;font-weight:300;font-size:clamp(2.2rem,10vw,3.4rem);letter-spacing:.02em;
  opacity:0;translate:0 18px;transition:opacity .5s var(--ease),translate .5s var(--ease)}
.menu.open .menu-links a{opacity:1;translate:0 0}
.menu.open .menu-links li:nth-child(2) a{transition-delay:.05s}
.menu.open .menu-links li:nth-child(3) a{transition-delay:.1s}
.menu.open .menu-links li:nth-child(4) a{transition-delay:.15s}
.menu-foot{display:grid;gap:4px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:18px}

/* ───────── Hero ───────── */
.hero{position:relative;height:100vh;height:100svh;padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px));padding-bottom:clamp(28px,5vh,56px);display:grid}
.hero-frame{position:relative;overflow:hidden;background:var(--paper);transform-origin:50% 0;width:100%;max-width:1920px;margin-inline:auto}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.hero-fade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 50%,color-mix(in srgb,var(--paper) 80%,transparent) 70%,var(--paper) 85%)}
.hero-logo{position:absolute;right:calc(var(--gr) + 3vw);top:50%;translate:0 -50%;width:clamp(140px,14vw,220px)}
.scroll-cue{position:absolute;left:50%;bottom:0;width:1px;height:clamp(22px,4vh,44px);background:var(--rule);overflow:hidden}
.scroll-cue::after{content:"";position:absolute;inset:0;background:var(--fg);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (min-width:1921px){
  /* wider than the render: keep it at 100 % and let its edges fade into the board */
  .hero-frame{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 88%,transparent)}
}

/* ───────── Úvod (the studio's own words) ───────── */
.intro{padding-block:clamp(96px,15vw,220px) clamp(80px,12vw,180px)}
.intro-in{display:grid;gap:clamp(48px,8vw,120px)}
.tagline{font-weight:300;font-size:clamp(2.7rem,8.4vw,8.8rem);line-height:.98;letter-spacing:.005em;max-width:15ch;text-wrap:balance}
.tagline b{font-weight:800}
.lede{justify-self:end;max-width:31ch;font-weight:300;font-size:clamp(1.3rem,2.3vw,2.15rem);line-height:1.34}
.lede b{font-weight:600}

/* ───────── Statement: their sentence, then the whole render grows ───────── */
.statement{padding-block:clamp(40px,6vw,90px) clamp(90px,12vw,170px)}
.st-text{font-weight:300;font-size:clamp(2.2rem,5.8vw,6.2rem);line-height:1.04;letter-spacing:.005em;max-width:17ch;text-wrap:balance}
.st-text b{font-weight:800}
.st-figure{margin-top:clamp(40px,6vw,80px);max-width:min(100%,1600px);margin-inline:auto;transform-origin:50% 0}
.st-figure img{width:100%;aspect-ratio:2133/1200;object-fit:cover}

/* ───────── Day / night ───────── */
.dn{padding-block:clamp(40px,6vw,90px) clamp(90px,12vw,170px)}
.compare{--pos:50%;position:relative;aspect-ratio:1002/664;width:100%;max-width:1002px;margin-inline:auto;overflow:hidden;cursor:ew-resize;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;background:var(--board-2)}   /* never wider than the renders themselves */
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;background:var(--paper);pointer-events:none}
.knob{position:absolute;top:50%;left:0;translate:-50% -50%;width:54px;height:54px;border-radius:50%;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;box-shadow:0 8px 24px -8px var(--shadow);transition:scale .25s var(--ease)}
.knob svg{width:26px;height:26px}
.compare.is-drag .knob{scale:1.1}
.compare:has(.compare-range:focus-visible) .knob{outline:2px solid var(--ink);outline-offset:3px}

/* ───────── Naše práce: categories that open into a strip of renders ───────── */
.works{padding-block:clamp(80px,11vw,160px)}
.works-title{color:var(--fg)}
.cats{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--rule)}
.cat{border-bottom:1px solid var(--rule)}
.cat-h{font:inherit}
.cat-btn{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:clamp(12px,1.6vw,22px) 0;border:0;background:none;cursor:pointer;text-align:left}
.cat-name{font-weight:300;font-size:clamp(2rem,5.6vw,5.6rem);line-height:1;letter-spacing:.005em;transition:transform .7s var(--ease),opacity .4s ease}
.cats:hover .cat:not(.is-open) .cat-name{opacity:.45}
.cats .cat-btn:hover .cat-name,.cats .cat-btn:focus-visible .cat-name{opacity:1;transform:translateX(1.6vw)}
.cat-icon{flex:none;position:relative;width:clamp(28px,3vw,44px);height:clamp(28px,3vw,44px)}
.cat-icon::before,.cat-icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.cat-icon::after{transform:rotate(90deg)}
.cat.is-open .cat-icon::after{transform:rotate(0)}
.cat-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .75s var(--ease)}
.cat.is-open .cat-panel{grid-template-rows:1fr}
/* the open panel (and its strip) runs off the right edge of the screen to show there is more */
.cat-in{overflow:hidden;min-height:0;margin-right:calc((100% - 100vw) / 2)}
.strip{--sh:clamp(240px,46vh,520px);display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding:clamp(6px,1vw,14px) var(--gr) 16px 0;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;cursor:grab}
.strip.is-dragging{cursor:grabbing;scroll-snap-type:none}
.strip.is-dragging .shot-btn{pointer-events:none}
.shot{flex:none;margin:0;height:min(var(--sh),var(--nh));aspect-ratio:var(--ar);scroll-snap-align:start}
.shot-btn{display:block;width:100%;height:100%;padding:0;border:0;background:var(--board-2);cursor:zoom-in;overflow:hidden}
.shot-btn img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);-webkit-user-drag:none;user-select:none}
.shot-btn:hover img{transform:scale(.965)}
.strip-nav{display:flex;gap:10px;justify-content:flex-end;padding:6px var(--gr) clamp(18px,2.4vw,32px) 0}

/* ───────── Spolupráca (turns night) ───────── */
.collab{padding-block:clamp(110px,15vw,220px)}
.collab-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px 32px;align-items:end}
.collab h2{grid-column:1/-1;font-weight:300;font-size:clamp(2.3rem,5.6vw,5.8rem);line-height:1.04;letter-spacing:.005em;max-width:18ch}
.collab-body{grid-column:1/6;display:grid;gap:22px;justify-items:start}
.collab-body p{color:var(--fg-2);max-width:46ch}
.collab-fig{grid-column:7/-1;max-width:1181px}
.collab-fig img{width:100%}

/* ───────── Kontakt: large rows in the manner of the gallery categories ───────── */
.contact{padding-block:clamp(100px,13vw,190px) clamp(80px,10vw,150px)}
.contact h2{font-weight:300;font-size:clamp(2.8rem,8.4vw,8.8rem);line-height:.95;letter-spacing:.005em;margin-bottom:clamp(40px,6vw,88px)}
.crows{border-top:1px solid var(--rule)}
.crow{display:grid;grid-template-columns:minmax(110px,2fr) 8fr auto;align-items:center;gap:12px 32px;padding:clamp(18px,2.2vw,30px) 0;border-bottom:1px solid var(--rule)}
.crow-l{color:var(--fg-2)}
.crow-v{justify-self:start;min-width:0;font-weight:300;font-size:clamp(1.45rem,4.4vw,4.4rem);line-height:1.1;letter-spacing:.005em;text-decoration:none;overflow-wrap:anywhere;
  transition:transform .7s var(--ease),opacity .4s ease}
.crow-v span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease)}
.crow-v:hover span,.crow-v:focus-visible span{background-size:100% 1px}
@media (hover:hover){
  .crows:hover .crow-v{opacity:.45}
  .crows .crow-v:hover{opacity:1;transform:translateX(1.6vw)}
}
.copy{min-height:34px;padding:0 12px;border:1px solid var(--rule);background:transparent;cursor:pointer;font:600 .62rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;transition:background .2s,color .2s;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.copy:hover{background:var(--fg);color:var(--bg)}
.crow .copy{justify-self:end;justify-content:center;min-width:112px}
.contact-meta{margin-top:clamp(28px,4vw,52px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 40px}
.contact-meta .name{font-size:1.35rem;font-weight:300;letter-spacing:.02em;margin-right:16px}
.contact-meta .person{color:var(--fg-2)}
.social{display:flex;gap:22px}

/* ───────── Footer ───────── */
.foot{background:var(--night);color:var(--night-ink);padding-block:clamp(40px,5vw,64px) calc(28px + env(safe-area-inset-bottom,0px))}
.foot-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px}
.foot-logo{width:72px}
.foot-base{display:flex;flex-wrap:wrap;gap:10px 32px;color:var(--night-2);font-size:.82rem}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot :focus-visible{outline-color:var(--night-ink)}

/* ───────── Lightbox: the image grows out of its place in the gallery ───────── */
.lb{position:fixed;inset:0;z-index:110;color:var(--night-ink);touch-action:pan-y}
.lb-bg{position:absolute;inset:0;background:var(--scrim)}
.lb-img{position:fixed;transform-origin:0 0;object-fit:cover;will-change:transform}
.lb-ui{position:absolute;inset:0;pointer-events:none}
.lb-ui > *{pointer-events:auto}
.lb .icon-btn{position:absolute;color:var(--night-ink);border-color:var(--night-line);width:48px;height:48px}
.lb .icon-btn:hover{background:var(--night-ink);color:var(--night)}
.lb :focus-visible{outline-color:var(--night-ink)}
.lb-close{top:calc(env(safe-area-inset-top,0px) + 12px);right:var(--gr)}
.lb-prev{left:var(--gl);top:50%;translate:0 -50%}
.lb-next{right:var(--gr);top:50%;translate:0 -50%}
.lb-meta{position:absolute;left:var(--gl);top:calc(env(safe-area-inset-top,0px) + 24px);display:flex;gap:18px;align-items:baseline;color:var(--night-2)}
.lb-meta .label{color:var(--night-ink)}

/* ───────── Cursor, toast ───────── */
.cursor{position:fixed;left:0;top:0;z-index:150;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--fg);color:var(--bg);pointer-events:none;
  display:grid;place-items:center;opacity:0;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),opacity .3s,background-color .8s}
.cursor.on{opacity:1}
.cursor.is-big{width:76px;height:76px;margin:-38px 0 0 -38px}
.cursor svg{position:absolute;width:24px;height:24px;opacity:0;transition:opacity .2s}
.cursor.is-view .c-view,.cursor.is-drag .c-drag{opacity:1}
html.lock .cursor{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

.toast{position:fixed;z-index:160;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));translate:-50% 20px;opacity:0;pointer-events:none;
  padding:12px 18px;background:var(--ink);color:var(--board);font-size:.9rem;max-width:calc(100% - 32px);transition:opacity .25s,translate .3s var(--ease)}
.toast.show{opacity:1;translate:-50% 0}

/* ───────── Privacy page ───────── */
.doc{padding-block:calc(var(--nav-h) + clamp(48px,8vw,110px)) clamp(80px,10vw,140px)}
.doc-in{max-width:68ch}
.doc h1{font-weight:300;font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.05;margin-bottom:clamp(28px,4vw,48px)}
.doc h2{font-weight:600;font-size:1.05rem;letter-spacing:.02em;margin:34px 0 10px}
.doc p,.doc li{color:var(--fg-2)}
.doc ul{list-style:disc;padding-left:1.2em;display:grid;gap:4px}
.doc .back{margin-top:40px}

/* ───────── Responsive ───────── */
@media (max-width:1023px){
  .collab-body,.collab-fig{grid-column:1/-1}
}
@media (max-width:959px){
  /* one column: twelve columns would keep eleven 32 px gaps, wider than a phone */
  .collab-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:819px){
  :root{--nav-h:60px}
  .topbar-in{grid-template-columns:auto 1fr auto}
  .links{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:719px){
  .hero{height:auto}
  .hero-frame{height:clamp(380px,58vh,540px);height:clamp(380px,58svh,540px)}
  .hero-img{object-position:62% 50%}
  .hero-fade{background:linear-gradient(180deg,transparent 52%,color-mix(in srgb,var(--paper) 86%,transparent) 76%,var(--paper) 92%)}
  .hero-logo{top:auto;bottom:16px;right:var(--gr);translate:none;width:100px}
  .strip{--sh:clamp(200px,58vw,340px)}
  .strip-nav{display:none}    /* swipe on phones */
  .crow{grid-template-columns:minmax(0,1fr) auto;padding-block:16px 20px}
  .crow-v{grid-column:1/-1;grid-row:2}
  .lb-prev,.lb-next{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);translate:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}