:root{
  --bg:#0b0b0b; --fg:#e6e6e6; --muted:#9a9a9a;
  --border:#1b1b1b; --container:1150px;
}
html,body{height:100%}
body{background:var(--bg); color:var(--fg); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; letter-spacing:.2px}
a{color:inherit; text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}

/* NAV */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(6px)}
.nav{display:flex; align-items:center; justify-content:flex-end; gap:26px; height:72px}
.brand{margin-right:auto; font-weight:600; letter-spacing:.4px}
.nav a{color:var(--muted); font-size:14px; text-transform:uppercase; letter-spacing:.14em}
.nav a:hover{color:var(--fg)}
.nav a.active{color:var(--fg)}
.icons a{opacity:.8} .icons a:hover{opacity:1}

/* Dropdown */
.dropdown{position:relative}
.dropdown > button{background:none; border:0; color:var(--muted); font-size:14px; text-transform:uppercase; letter-spacing:.14em; cursor:pointer; display:flex; align-items:center; gap:6px}
.dropdown > button:hover, .dropdown[aria-expanded="true"] > button{color:var(--fg)}
.menu{position:absolute; right:0; top:48px; background:#0f0f0f; border:1px solid var(--border); border-radius:12px; padding:8px; min-width:200px; display:none; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.menu a{display:block; padding:10px 12px; border-radius:8px; color:#d8d8d8; text-transform:none; letter-spacing:0}
.menu a:hover{background:#151515}
.dropdown[aria-expanded="true"] .menu{display:block}

/* Sections & elements */
.section{padding:80px 0}
.lead{font-size:28px; margin:0 0 16px}
.text{color:var(--muted); line-height:1.6; font-size:15px}
.avatar-wrap{display:flex; align-items:center; justify-content:center}
.avatar{width:300px; height:300px; border-radius:50%; overflow:hidden; position:relative; box-shadow:0 0 0 1px #1f1f1f, 0 20px 60px rgba(0,0,0,.55)}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}

.section h2{font-size:18px; margin:0 0 14px}
.subnav{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 24px}
.chip{border:1px solid var(--border); padding:10px 14px; border-radius:999px; font-size:13px; color:#d8d8d8}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.tile{position:relative; background:#121212; border-radius:14px; overflow:hidden; aspect-ratio:16/9; border:1px solid var(--border)}
.tile img, .tile video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tile .label{position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.55); padding:6px 10px; border-radius:999px; font-size:12px}

footer{padding:40px 0 80px; text-align:center; color:var(--muted); font-size:13px}
footer a{color:var(--fg)}

@media (max-width: 900px){
  .avatar{width:240px; height:240px}
  .grid{grid-template-columns:1fr 1fr}
  .menu{right:auto; left:0}
}
@media (max-width: 560px){ .grid{grid-template-columns:1fr} }

.fade-in{opacity:0; transform:translateY(8px); animation:fade .7s ease .1s forwards}
@keyframes fade{to{opacity:1; transform:none}}


/* Lightbox (minimal, dark, centered) */
.lightbox-overlay{position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:1000; padding:24px}
.lightbox-overlay.open{display:flex}
.lightbox-content{position:relative; max-width:min(92vw, 1400px); max-height:92vh}
.lightbox-content img{width:100%; height:auto; max-height:92vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox-close{position:absolute; top:-36px; right:0; background:transparent; border:0; color:#e6e6e6; font-size:28px; line-height:1; cursor:pointer}
@media (max-width: 600px){ .lightbox-close{top:-32px; right:0; font-size:26px} }

/* === Mobile-only enhancements (desktop unchanged) === */
@media (max-width: 760px){
  :root{ --safe-pad:16px; }
  .container{ padding:0 var(--safe-pad); }
  .nav{ height:64px; gap:14px; }
  .nav a{ font-size:13px; letter-spacing:.12em; padding:10px 8px; }
  .section{ padding:56px 0; }
  .intro{ grid-template-columns:1fr !important; gap:28px; }
  .avatar{ width:220px; height:220px; }
  .grid{ grid-template-columns:1fr !important; gap:14px; }
  #tiktoky .tile{ width:100% !important; }
  h1.lead{ font-size:22px; }
  .section h2{ font-size:18px; margin-bottom:12px; }
}
.menu-toggle{ display:none; background:none; border:0; color:var(--fg); font-size:22px; line-height:1; padding:8px; border-radius:12px; }
.nav-links{ display:flex; align-items:center; gap:18px; }
@media (max-width:760px){
  .menu-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:64px 0 auto 0;
    background:rgba(12,12,12,.98);
    border-top:1px solid var(--border);
    display:none; flex-direction:column; align-items:flex-start; gap:14px;
    padding:14px var(--safe-pad) 18px;
  }
  .nav-links.open{ display:flex; }
  .icons{ margin-left:auto; }
}
.tile iframe, .tile video, .tile img{ width:100%; height:100%; object-fit:cover; }

/* Mobile: stack the intro so image appears under the text */
@media (max-width: 760px){
  /* first main section on pages – text column then avatar below */
  .container > .section:first-of-type{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .container > .section:first-of-type .avatar-wrap{
    justify-content:flex-start !important;
  }
}


/* Layout: footer after content (not sticky) */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; padding: 28px 0 48px; text-align:center; color: var(--muted); font-size: 13px; }
footer .footer-icons { margin-bottom: 10px; display:flex; gap:14px; justify-content:center; }
footer .footer-icons a { opacity:.85; }
footer .footer-icons a:hover { opacity:1; }


/* === Dark Gray Minimalist Theme (structure unchanged) === */
:root{
  --bg:#121212;
  --fg:#eaeaea;
  --muted:#a7a7a7;
  --line:#1f1f1f;
  --accent:#ffffff;
  --container:1150px;
}

/* Base */
html, body{ background:var(--bg); color:var(--fg); }
body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; letter-spacing:.2px; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* Headings & text */
h1.lead{ color:var(--fg); font-weight:600; font-size:28px; line-height:1.15; margin:0 0 14px; }
.section h2{ color:var(--fg); font-size:18px; font-weight:600; letter-spacing:.03em; margin:0 0 12px; }
.text{ color:var(--muted); font-size:15px; line-height:1.7; }

/* Header / Nav */
header{ background:rgba(18,18,18,.85); backdrop-filter:saturate(120%) blur(8px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:flex-end; height:72px; gap:22px; }
.nav a{ color:#bbb; text-transform:uppercase; font-size:13px; letter-spacing:.14em; padding:10px 10px; border-radius:10px; transition:color .2s ease, background .2s ease; }
.nav a:hover, .nav a.active{ color:var(--accent); background:rgba(255,255,255,.06); }
.icons a{ opacity:.85; padding:8px; border-radius:10px; }
.icons a:hover{ opacity:1; background:rgba(255,255,255,.06); }

/* Sections */
.section{ padding:80px 0; background:transparent; }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* Avatar */
.avatar{ width:300px; height:300px; border-radius:18px; overflow:hidden; position:relative; outline:1px solid var(--line); background:#1a1a1a; }
.avatar img{ width:100%; height:100%; object-fit:cover; }

/* Tiles */
.tile{ position:relative; background:#1b1b1b; border-radius:16px; overflow:hidden; outline:1px solid var(--line); transition:transform .2s ease, outline-color .2s ease; }
.tile:hover{ transform:translateY(-2px); outline-color:#2a2a2a; }
.tile img,.tile video,.tile iframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Ratio helpers */
.ratio{ position:relative; width:100%; border-radius:16px; overflow:hidden; outline:1px solid var(--line); }
.ratio > *{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ratio-16x9{ aspect-ratio:16/9; }
.ratio-9x16{ aspect-ratio:9/16; }

/* Chips / links */
.chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:#181818; color:var(--fg); outline:1px solid var(--line); }
.chip:hover{ background:#1f1f1f; }

/* Footer */
footer{ padding:28px 0 48px; text-align:center; color:var(--muted); font-size:13px; border-top:1px solid var(--line); margin-top:60px; }
footer .footer-icons{ margin-bottom:10px; display:flex; gap:14px; justify-content:center; }
footer .footer-icons a{ opacity:.85; padding:8px; border-radius:10px; }
footer .footer-icons a:hover{ opacity:1; background:rgba(255,255,255,.06); }

/* Lightbox */
.lightbox-overlay{ background:rgba(0,0,0,.92); }
.lightbox-content img{ border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lightbox-close{ color:#f0f0f0; }

/* Mobile */
@media (max-width:760px){
  .nav{ height:64px; gap:14px; }
  .nav a{ font-size:12px; letter-spacing:.12em; padding:10px 8px; }
  .section{ padding:56px 0; }
  .grid{ grid-template-columns:1fr; gap:14px; }
  .avatar{ width:220px; height:220px; border-radius:14px; }
  #tiktoky .tile{ width:100% !important; }
  h1.lead{ font-size:24px; }
  .section h2{ font-size:17px; }
}

/* Animations */
.fade-in{ animation:fade .5s ease both; }
@keyframes fade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }


/* === Centered top nav & no lines (dark) === */
header{ position:static !important; background:transparent !important; border-bottom:none !important; }
.nav{ justify-content:center !important; }
.nav .icons{ display:none !important; } /* skrýt ikonky v horní navigaci, zůstanou ve footeru */
footer{ border-top:none !important; }
/* optional: slightly more space above content since header is static */
.container > .section:first-of-type{ padding-top:72px; }


/* === Mobile: no hamburger, show inline nav links === */
@media (max-width: 760px){
  .menu-toggle{ display:none !important; }
  .nav{ justify-content:center !important; }
  .nav-links{
    position:static !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:16px !important;
    padding:0 !important;
    background:transparent !important;
    border-top:0 !important;
  }
}