/* janpavlacky.com — direction A "Night shoot"
   Single visual world: always dark, colours painted explicitly. */
:root{
  --bg:#0c0d0e; --raise:#131517; --ink:#ebe7de; --ink-2:#c9c5bc; --mute:#8d8a83; --line:#25272a; --tung:#d9a441;
  --display:"Archivo","Arial Narrow","Roboto Condensed","DejaVu Sans Condensed",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gutter:max(16px,4vw);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--tung);outline-offset:3px}
::selection{background:var(--tung);color:var(--bg)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{padding-inline:var(--gutter);max-width:1680px;margin-inline:auto}

/* ---------- Type ---------- */
.disp{font-family:var(--display);font-stretch:62%;font-variation-settings:"wdth" 62;font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;text-wrap:balance;margin:0}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.mute{color:var(--mute)}

/* ---------- Header ---------- */
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;padding-block:22px}
.mark{font-family:var(--display);font-stretch:62%;font-variation-settings:"wdth" 62;font-weight:700;font-size:26px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.nav{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center}
.nav a{text-decoration:none;color:var(--mute);transition:color .2s}
.nav a:hover{color:var(--ink)}
.nav .lang{color:var(--tung)}

/* ---------- Frames ---------- */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);pointer-events:none;mix-blend-mode:screen;opacity:.9;z-index:1}
.frame-lines{position:absolute;inset:14px;pointer-events:none;z-index:2;--c:rgba(235,231,222,.55);--l:20px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat}

/* ---------- Hero ---------- */
.hero{position:relative;width:100%;aspect-ratio:2.39/1;max-height:74vh;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 70% at 74% 28%, rgba(217,164,65,.26), transparent 62%),
    radial-gradient(ellipse 55% 60% at 12% 92%, rgba(70,104,138,.22), transparent 64%),
    linear-gradient(180deg,#0a0b0c,#101214);
  background-size:130% 130%,120% 120%,100% 100%;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{background-position:0% 0%,100% 100%,0 0}to{background-position:100% 60%,0% 40%,0 0}}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-in{position:absolute;inset:0;padding:34px 38px;display:grid;grid-template-rows:auto 1fr auto;z-index:3}
.hero-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tc{font-variant-numeric:tabular-nums}
.tc i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tung);margin-right:8px;vertical-align:1px}
.hero-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.name{font-size:clamp(60px,12.5vw,210px)}
.latest{display:inline-grid;gap:6px;text-decoration:none;border:1px solid rgba(235,231,222,.4);padding:12px 18px;background:rgba(12,13,14,.35);transition:border-color .2s,color .2s}
.latest b{font-weight:500;color:var(--ink)}
.latest:hover{border-color:var(--tung)}
.latest:hover b{color:var(--tung)}
.reel{display:inline-flex;align-items:center;gap:12px;background:transparent;border:1px solid rgba(235,231,222,.45);padding:12px 18px}
.reel:hover{border-color:var(--tung);color:var(--tung)}
.reel svg{width:12px;height:12px;fill:currentColor}
.strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:16px;border-bottom:1px solid var(--line)}
.strip b{color:var(--ink);font-weight:500}

/* ---------- Sections ---------- */
.sec{padding-block:72px 24px;scroll-margin-top:12px}
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;margin-bottom:8px}
.sec-h h2{font-size:clamp(40px,6vw,76px)}

/* Stills (placeholder gradients until real photos arrive) */
.still{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--raise);border:0;padding:0;text-align:left;max-width:100%}
.still > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.still .lab{position:absolute;left:16px;bottom:14px;z-index:3;color:rgba(235,231,222,.72);text-shadow:0 1px 4px rgba(0,0,0,.75)}
.still .k{position:absolute;right:16px;top:14px;z-index:3;color:rgba(235,231,222,.72);text-shadow:0 1px 4px rgba(0,0,0,.75)}
.still .frame-lines{inset:10px;--l:14px;--c:rgba(235,231,222,.35)}
.still .pl{position:absolute;left:50%;top:50%;z-index:3;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1px solid rgba(235,231,222,.55);display:grid;place-items:center;background:rgba(12,13,14,.45);backdrop-filter:blur(2px);box-shadow:0 2px 18px rgba(0,0,0,.45);transition:transform .3s ease,border-color .3s,background .3s}
.still .pl svg{width:14px;height:16px;fill:var(--ink);margin-left:3px}
button.still:hover .pl{transform:scale(1.08);border-color:var(--tung);background:rgba(217,164,65,.18)}
.l-ochre{background:radial-gradient(ellipse 70% 80% at 65% 35%,rgba(204,150,78,.34),transparent 65%),linear-gradient(160deg,#17130e,#0b0b0b)}
.l-sodium{background:radial-gradient(ellipse 50% 70% at 30% 20%,rgba(226,132,48,.30),transparent 60%),radial-gradient(ellipse 60% 50% at 90% 100%,rgba(40,60,90,.35),transparent 70%),#0b0c0e}
.l-moon{background:radial-gradient(ellipse 60% 80% at 50% 10%,rgba(120,150,190,.28),transparent 62%),linear-gradient(180deg,#0d1014,#070809)}
.l-dim{background:radial-gradient(ellipse 60% 70% at 40% 40%,rgba(235,231,222,.10),transparent 65%),#101113}
.still{transition:filter .4s ease}
.row:hover .still,.srow:hover .still{filter:brightness(1.22)}

/* Series rows */
.row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);padding-block:40px;border-top:1px solid var(--line);scroll-margin-top:12px}
.meta{display:flex;flex-direction:column;gap:14px;align-self:center;min-width:0}
.title{font-size:clamp(40px,5vw,84px)}
.season{color:var(--tung)}
.role{font-weight:500}
.log{color:var(--ink-2);max-width:46ch;margin:0;font-size:16px;line-height:1.6}
.links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4px}
.links a,.links button{background:none;border:0;padding:0 0 2px;text-decoration:none;border-bottom:1px solid rgba(217,164,65,.55);font-size:15px}
.links a:hover,.links button:hover{color:var(--tung)}

/* Short format */
.srow{display:grid;grid-template-columns:200px minmax(0,1fr) auto;align-items:center;gap:24px;padding-block:18px;border-top:1px solid var(--line)}
.srow .still .pl{width:40px;height:40px;margin:-20px 0 0 -20px}
.srow .still .pl svg{width:10px;height:12px}
.srow h3{font-size:clamp(28px,3.2vw,44px)}
.srow .sub{color:var(--ink-2);margin-top:6px}
.srow .ty{text-align:right}
.srow:has(button.still):hover h3{color:var(--tung)}

/* About */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start;border-top:1px solid var(--line);padding-top:40px}
.about .still{aspect-ratio:4/5;max-width:440px}
.bio{font-size:clamp(18px,1.6vw,22px);line-height:1.55;max-width:34em;margin:0 0 20px;text-wrap:pretty}
.bio em{font-style:normal;color:var(--tung)}
.cta{display:inline-flex;gap:10px;align-items:center;text-decoration:none;background:var(--ink);color:var(--bg);padding:13px 20px;font-weight:600;transition:background .2s}
.cta:hover{background:var(--tung)}

/* Press */
.press a{display:grid;grid-template-columns:220px minmax(0,1fr) 70px 20px;gap:20px;align-items:baseline;padding-block:18px;border-top:1px solid var(--line);text-decoration:none}
.press .o{color:var(--tung)}
.press .h{font-size:18px}
.press a:hover .h{text-decoration:underline;text-decoration-color:var(--tung);text-underline-offset:4px}

/* Contact */
.contact{border-top:1px solid var(--line);padding-top:40px;display:grid;gap:26px}
.mail{font-size:clamp(34px,7.4vw,124px);text-transform:none;text-decoration:none;overflow-wrap:anywhere}
.mail:hover{color:var(--tung)}
.cgrid{display:flex;flex-wrap:wrap;gap:12px 40px}
.cgrid a{text-decoration:none}
.cgrid a:hover{color:var(--tung)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:56px 36px;color:var(--mute)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* ---------- Player ---------- */
.player{width:min(1200px,94vw);max-width:none;padding:0;border:0;background:#000;color:var(--ink)}
.player::backdrop{background:rgba(5,5,6,.9)}
.player .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;background:var(--bg)}
.player .bar a{text-decoration:none;color:var(--mute)}
.player .bar a:hover{color:var(--ink)}
.player .x{background:none;border:1px solid var(--line);padding:6px 12px}
.player .x:hover{border-color:var(--tung);color:var(--tung)}
.player .scr{aspect-ratio:16/9;background:#000}
.player .scr iframe,.player .scr video{width:100%;height:100%;border:0;display:block}

/* ---------- 404 ---------- */
.lost{min-height:70vh;display:grid;align-content:center;gap:24px}
.lost h1{font-size:clamp(64px,14vw,220px)}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .hero{aspect-ratio:auto;max-height:none}
  .hero-in{position:relative;min-height:440px;padding:26px 24px}
  .row,.about{grid-template-columns:minmax(0,1fr)}
  .srow{grid-template-columns:120px minmax(0,1fr);gap:8px 18px}
  .srow .ty{grid-column:2;text-align:left}
  .press a{grid-template-columns:minmax(0,1fr) 50px;gap:6px 16px}
  .press .o{grid-column:1/-1}
  .press .ar{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{animation:none}
  .still,.still .pl{transition:none}
}