/* ==========================================================================
   HEADER — lepivá hlavička a navigace
   ========================================================================== */

header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
}

.bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:.85rem 0;
}

/* --- značka: wordmark + lamelová značka ---
   Značka je čtyři vodorovné pruhy různé délky — zmenšené obložení.
   Až bude hotové skutečné logo, nahraď .mark za <img src="assets/logo.svg">. */
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand .mark{ display:flex; flex-direction:column; gap:2px; width:22px; }
.brand .mark i{
  display:block; height:4px; border-radius:1px;
  background:linear-gradient(to bottom, var(--wood-hi) 0px, var(--wood-hi) 1px, var(--wood) 1px, var(--wood) 3px, var(--wood-lo) 3px, var(--wood-lo) 4px);
}
.brand .mark i:nth-child(2){ width:70% }
.brand .mark i:nth-child(4){ width:82% }
.brand b{
  font-family:"Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight:800; font-size:1.5rem; line-height:1;
  letter-spacing:.015em; text-transform:uppercase;
}

nav{ display:flex; gap:1.6rem; align-items:center; }
nav a{
  font-size:.9rem; text-decoration:none; color:var(--ink-2);
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:border-color .2s, color .2s;
}
nav a:hover{ color:var(--ink); border-color:var(--oak); }

.nav-cta{
  font-size:.86rem; padding:.5rem 1rem;
  border:1px solid var(--ink); border-radius:2px;
  text-decoration:none; color:var(--ink); white-space:nowrap;
  transition:background .2s, color .2s;
}
.nav-cta:hover{ background:var(--ink); color:var(--ground); }

@media (max-width:840px){
  nav .hide-sm{ display:none; }
}