/* Studio UI: graphite and soft white. Client artwork keeps its own palette. */
:root{
  --floor:#171716;--bone:#f4f2ed;--dim:#b5b4af;--ink:#555550;
  --panel:#222221;--well:#111110;--rule:#d6d5ce;
  --set:#f4f2ed;--set-ink:#3e3e3a;--on-set:#171716;
  --signal:#f4f2ed;--on-signal:#171716;--zone:#b5b4af;
  --hyb-plocha:#c6c6c1;--hyb-pismo:#171716;--hyb-lem:#171716;
}
.light{--dim:#62625d;--set:#171716;--on-set:#f4f2ed}
#ai-projekty{background:var(--floor)}
header.stuck,.page-header.stuck{background:rgba(23,23,22,.88);backdrop-filter:blur(16px)}
.page-header,.page-menu{background:#171716;color:#f4f2ed}
.topnav a.nv,.page-desktop>a{color:#c6c6c1}
.topnav a.nv:hover,.topnav a.nv[aria-current="true"],
.page-desktop>a:hover,.page-desktop>a[aria-current=page],
.page-menu a[aria-current=page]{color:#f4f2ed}
.topnav a.nv[aria-current="true"],.page-desktop>a[aria-current=page],
.menu nav a[aria-current="true"],.page-menu a[aria-current=page]{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;
}
header.on-light .topnav a.nv{color:#555550}
header.on-light .topnav a.nv:hover,header.on-light .topnav a.nv[aria-current="true"]{color:#171716}
.btn:hover,.btn:focus-visible{box-shadow:0 12px 28px -12px #0008}
.btn.ghost:hover{box-shadow:none}
#vizualy .badge.hyb{background:var(--hyb-plocha);color:var(--hyb-pismo)}
.dark .head p,.social-heading p{color:var(--dim)}
.light :focus-visible{outline-color:#3e3e3a}
.social-project-toggle:focus-visible,.social-project-link:focus-visible{outline-color:#f4f2ed}
#znacka .brand-object:focus-visible{box-shadow:0 0 0 2px #f4f2ed}
#znacka .brand-tag{background:#222221c9;color:#f4f2ed}
.tim-pata a{text-decoration-color:#999994}

/* Approved homepage palette, 14 October 2026.
   Three tones frame the work; transitions stay between content. */
html.l22-home {
  --home-deep: #0d0d0c;
  --home-graphite: #1d1d1c;
  --home-hero: #141413;
  --home-between: #151514;
  --home-client-rule: #30302e;
  --home-edge: clamp(32px, 4.5vw, 64px);
}
html.l22-home .atmosfera { display: none; }
html.l22-home.intro #l22intro { background: var(--home-hero); }

/* Match the hero edge even when the canvas boundary lands on a fractional
   device pixel. The opaque outer seam covers 2px; intentional rules are drawn
   inside the strip, so they cannot double up with the old mobile border. */
html.l22-home .mq {
  background: linear-gradient(180deg,var(--home-hero),var(--home-deep));
  border: 0;
  padding-block: 16px;
  box-shadow:
    0 -2px 0 var(--home-hero),
    inset 0 1px 0 var(--home-client-rule),
    inset 0 -1px 0 var(--home-client-rule);
}
html.l22-home #vizualy {
  background: var(--home-deep);
}
html.l22-home #ai-projekty {
  padding-top: max(44px,var(--home-edge));
  background: linear-gradient(180deg,var(--home-deep),var(--home-graphite) var(--home-edge));
}
html.l22-home .break {
  padding-bottom: var(--home-edge);
  background: linear-gradient(180deg,
    var(--home-graphite) calc(100% - var(--home-edge)),var(--home-between));
}
html.l22-home .break::after { background: transparent; }

html.l22-home #weby {
  padding-block: var(--home-edge);
  background: linear-gradient(180deg,
    var(--home-between),var(--home-deep) var(--home-edge),
    var(--home-deep) calc(100% - var(--home-edge)),var(--home-between));
}
html.l22-home #znacka {
  padding-block: var(--home-edge);
  background: linear-gradient(180deg,
    var(--home-between),var(--home-graphite) var(--home-edge),
    var(--home-graphite) calc(100% - var(--home-edge)),var(--home-between));
}
html.l22-home #socialne-siete {
  padding-top: var(--home-edge);
  background: linear-gradient(180deg,var(--home-between),var(--home-deep) var(--home-edge));
}

/* One quiet frame throughout the page; transparent at the top of the hero. */
html.l22-home body > header.stuck:not(.on-light) {
  background: rgba(13,13,12,.96);
  border-bottom-color: transparent;
  backdrop-filter: blur(8px);
}

/* The closing chapter repeats the raised graphite. Recessed fields remain
   recognisable, with visible borders and the original validation/focus states. */
html.l22-home #kontakt,
html.l22-home footer.site-footer {
  background: var(--home-graphite);
}
html.l22-home #kontakt .field :is(input,textarea,select) {
  background-color: var(--floor);
  border-color: #74746f;
}
html.l22-home #kontakt .field :is(input,textarea,select):focus {
  border-color: #d6d5ce;
}
html.l22-home #kontakt .field :is(input,textarea):user-invalid {
  border-color: #e4a6a6;
}
html.l22-home footer.site-footer { border-top-color: #f4f2ed1a; }

/* Keep the reading surface dark; open up the unobstructed image area. */
html.l22-home .social-project.is-active::after {
  background:
    linear-gradient(90deg,#171716 0%,#171716 24%,#171716f5 34%,#171716d9 44%,#17171666 58%,#17171614 76%,transparent 90%),
    linear-gradient(0deg,#1717164d,transparent 35%);
}
html.l22-home .social-project:not(.is-active)::after {
  background: linear-gradient(180deg,#141312b3 0%,#14131240 28%,transparent 45%,#141312c2 100%);
}
@media (min-width:701px) and (max-width:1000px) {
  html.l22-home .social-project.is-active::after {
    background:linear-gradient(90deg,#171716 0%,#171716f2 30%,#171716c9 55%,#17171633 100%);
  }
}
@media (max-width:700px) {
  html.l22-home .social-project.is-active::after {
    background:
      linear-gradient(90deg,#171716f2 0%,#171716db 35%,#171716a6 70%,#17171633 100%),
      linear-gradient(0deg,#171716 0%,transparent 40%);
  }
}