/* ===== CSS RESET (trimmed) ===== */
    *,*::before,*::after{box-sizing:border-box}
    html:focus-within{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font-family-base);
      font-size:var(--type-body-size);
      line-height:var(--type-body-line);
    }
    img{max-width:100%;}
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}


* { margin: 0; }

    /* ===== THEME ===== */
    :root {
      --bg: #ffffff;
      --ink: #1a1a1a;
      --muted: #6a6a6a;
      --panel: #111;         /* dark panels (about/footer) */
      --panel-ink: #eaeaea;  /* text on dark panels */
      --accent: #999;
      --gap: 16px;
      --radius: 12px;
      --maxw: 1120px;
       --wrap: min(720px, calc(100vw - 48px));

      /* Spacing — Vertical */
      --space-h2-subheader: 4px;        /* 0.25rem */
      --space-h2-sections: 44px;        /* 2.75rem */
      --space-h2-labels: 8px;           /* 0.50rem */
      --space-projectpreview-h2: 12px;  /* 0.75rem */
      --space-menu-text-divider: 12px;  /* 0.75rem */
      --space-menuitem-gap: 28px;       /* 1.75rem */
      --space-workprojects-text-img: 22px; /* 1.375rem */

      /* Spacing — Horizontal */
      --space-label-label-x: 8px;       /* 0.50rem */

      /* Padding */
      --pad-section-y: 36px;            /* 2.25rem */
      --pad-lr: 16px;                   /* 1.00rem */
      --pad-menu-x: 28px;               /* 1.75rem */
      --pad-navbar-top: 44px;           /* 2.75rem */
      --pad-navbar-bottom: 22px;        /* 1.375rem */

      /* Label */
      --radius-label: 75px;             /* 4.6875rem */

      /* Typography — Mobile */
      --font-family-base: "Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
      --type-body-size: 1.125rem;       /* 18px */
      --type-body-line: 1.75rem;        /* 28px */
      --type-tags-size: 0.75rem;        /* 12px */
      --type-tags-line: 1rem;           /* 16px */
      --type-menu-size: 1.25rem;        /* 20px */
      --type-menu-line: 1.625rem;       /* 26px */
      --type-h2-size: 0.75rem;          /* 12px */
      --type-h2-line: 1rem;             /* 16px */
      --type-subhead-size: 0.75rem;     /* 12px */
      --type-subhead-line: 1.125rem;    /* 18px */
      --type-h1-size: 1.25rem;          /* 20px */
      --type-h1-line: normal;           /* auto */
    }
    
    @media (min-width: 768px){
      :root{ --gap: 20px }
    }
    @media (min-width: 900px){
      :root{
        --type-body-size: 1.375rem;     /* 22px */
        --type-body-line: 2.125rem;     /* 34px */
        --type-tags-size: 1rem;         /* 16px */
        --type-tags-line: 1.375rem;     /* 22px */
        --type-menu-size: 1.375rem;     /* 22px */
        --type-menu-line: 1.75rem;      /* 28px */
        --type-h2-size: 1rem;           /* 16px */
        --type-h2-line: 1.375rem;       /* 22px */
        --type-subhead-size: 1rem;      /* 16px */
        --type-subhead-line: 1.5rem;    /* 24px */
        --type-h1-size: 1.5rem;         /* 24px */
        --type-h1-line: 1.75rem;        /* 28px */
      }
    }
    body{background:var(--bg);color:var(--ink)}
    h1{
      font-size:var(--type-h1-size);
      line-height:var(--type-h1-line);
    }
    h2{
      font-size:var(--type-h2-size);
      line-height:var(--type-h2-line);
    }
    .wrap{max-width:var(--maxw);margin-inline:auto;padding-bottom:0}
    .nav{padding: 24px;}

    /* ===== ACCESSIBILITY ===== */
    .skip{
      position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
    }
    .skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:8px 12px;background:#fff;border:1px solid #000;z-index:10}

    /* ===== HEADER / NAV ===== */
    header{position:sticky;top:0;background:var(--bg);z-index:9;}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding: var(--pad-navbar-top) var(--pad-lr) var(--pad-navbar-bottom);}
    .brand{
      font-weight:700;
      letter-spacing:.02em;
      display:flex;
      flex-direction:column;
      text-decoration:none;
      color:inherit;
    }
    .brand span{
      display:block;
    }   
    .navmenu{margin-left:auto;display:flex;align-items:center;position:relative;z-index:10}
    .hamburger{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;border:none;padding:0;color:inherit}
    .hamburger .bars{width:22px;height:2px;background:var(--ink);box-shadow:0 6px 0 var(--ink),0 -6px 0 var(--ink);transition:box-shadow .3s ease, background .3s ease}
    .navmenu.is-open .hamburger .bars{box-shadow:none;background:transparent}
    @media (min-width: 900px){
      .navmenu{display:none}
.navlinks{display:flex;gap:20px;}      
    }

    @media (max-width: 900px){
      .navlinks{display:none}
    }

    .navlinks a,
    .navmenu .overlay a,
    .cta a{
      font-size:var(--type-menu-size);
      line-height:var(--type-menu-line);
    }

    /* ===== HERO ===== */
    .hero{min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center}
    .eyes{
      width:122px;height:48px;margin-inline:auto;margin-bottom:18px;
      background: radial-gradient(closest-side,#000 60%,transparent 61%) 25% 50%/18px 18px no-repeat,
                  radial-gradient(closest-side,#000 60%,transparent 61%) 75% 50%/18px 18px no-repeat,
                  linear-gradient(#000,#000) 0 100%/100% 2px no-repeat;
      filter:contrast(120%);
    }
    .hero .kicker{font-size:.85rem;letter-spacing:.08em;color:var(--muted)}
    .scroll-cue{font-size:.85rem;color:var(--muted)}
    .scroll-cue::after{content:" ↓";font-size:1rem}
    @media (prefers-reduced-motion:no-preference){
      .scroll-cue{animation:blink 2s infinite}
      @keyframes blink{0%,90%{opacity:.65} 100%{opacity:1}}
    }

    .hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* nebo libovolná výška */
}

.hero {
    
}

.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center; /* oči doprostřed */
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.hero .eyes {
  /* pro střed sekce */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero .bottom {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  gap: var(--space-h2-subheader);
}

.hero .kicker {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--muted);  
}

.hero .scroll-cue {
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.7;
}

section {
    padding: var(--pad-section-y) var(--pad-lr);
}

    /* ===== DARK PANEL (ABOUT) ===== */
    .panel{background:var(--panel);color:var(--panel-ink)}
    .about{max-width:720px;margin-inline:auto;}
    .about h2{
      margin:0 0 8px 0;
      font-size:var(--type-subhead-size);
      line-height:var(--type-subhead-line);
      letter-spacing:.05em;
      color:#bdbdbd;
    }
    .about p{margin:0 0 12px 0}
    .about p + p{opacity:.95}

    .about .description{display:flex;flex-direction:column;gap:var(--space-workprojects-text-img)}

    /* ===== SELECTED WORK ===== */
    .section .title {
      font-size:var(--type-h2-size);
      line-height:var(--type-h2-line);
      letter-spacing:.06em;
      text-transform:uppercase;
    }
    .section .section-header{display: flex; flex-direction: column; padding-bottom: var(--space-h2-sections);}
    .grid{
      display:grid;gap:var(--space-workprojects-text-img);
      grid-template-columns:1fr;
    }
    @media (min-width: 700px){ .grid{ grid-template-columns:repeat(2,1fr) } }
    @media (min-width: 1100px){ .grid{ grid-template-columns:repeat(3,1fr) } }
    .card{
        display: flex;
        flex-direction: column;
        overflow:hidden;background:#fff;
        transition:transform .2s ease, box-shadow .2s ease;
        gap: var(--space-projectpreview-h2);         
    }
    .thumb{
      aspect-ratio:4/3;background:#111;color:#e5e5e5;display:grid;place-items:center;
      font-weight:600;letter-spacing:.08em; object-fit: cover; object-position: center; /* 🔹 zarovná na střed */    
    }
    .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;    /* 🔹 obrázek vyplní, ale zachová poměr */
        object-position: center; /* 🔹 zarovná na střed */        
    }
    .card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
    .meta{display:flex;flex-direction:column;gap:.5rem;}
    .meta .title{font-weight:600;margin:0;}
    .tags{display:flex;flex-wrap:wrap;gap:var(--space-label-label-x)}
    .tag{
      font-size:var(--type-tags-size);
      line-height:var(--type-tags-line);
      padding:4px 8px;
      border-radius:999px;
      border:1px solid #ddd;
      background:var(--bg);
      text-transform: uppercase;
    }

    /* ===== CONTACT / FOOTER ===== */
    .contact{background:var(--panel);color:var(--panel-ink);}
    .contact .wrap{display: flex;flex-direction: column;gap:var(--space-h2-sections)}
    .cta{display:flex;flex-direction:column;gap: var(--space-menuitem-gap);}
    .cta a{
      border-top:1px solid #3a3a3a;padding:14px 0;display:flex;justify-content:space-between;align-items:center
    }
    .cta a:hover{opacity:.9}
    .footer{border-top:1px solid #1e1e1e;background:#0b0b0b;color:#bdbdbd;font-size:.85rem}
    .footer .footwrap{max-width:var(--maxw);margin-inline:auto;display:flex;justify-content:space-between;align-items:center;}
    .muted{color:#9a9a9a;text-transform: uppercase;font-size: var(--type-subhead-size);}

    /* ==== FULLSCREEN MOBILE MENU – ANIMACE ==== */

/* Skryj defaultní trojúhelník u <summary> */
/* Overlay je vždy ve stromu (kvůli animaci), ale v zavřeném stavu mimo plátno */
.navmenu .overlay {
  position: fixed;
  inset: 0;
  background: #111;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 48px 24px;
  z-index: 100;

  pointer-events: none;
  transform: translateX(100%);
  transition: transform .6s ease;
}

/* otevřený stav – animace proběhne tam i zpět */
.navmenu.is-open .overlay {
  pointer-events: auto;
  transform: translateX(0);
}

/* tlačítko zpět (zavření) */
.navmenu .close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  text-align: left;
  margin-bottom: 36px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transform: translateX(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.navmenu.is-open .close { transform: translateX(0); opacity: 1; }
.navmenu .close:hover { opacity: .8; }

/* seznam položek */
.navmenu .overlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* jednotlivé položky: jemné „vyjetí“ + fade se stupňováním */
.navmenu .overlay li {
  border-bottom: 1px solid #2a2a2a;
  transform: translateX(32px);
  transition: transform .6s ease;
  transition-delay: var(--navmenu-item-delay, 0s);
}

/* otevřené – zpět na místo */
.navmenu.is-open .overlay li {
  transform: translateX(0);
}

/* postupné zpoždění (stagger) pro 1–6 položek, přidej/změň dle potřeby */
.navmenu .overlay li:nth-child(1) { --navmenu-item-delay: .05s; }
.navmenu .overlay li:nth-child(2) { --navmenu-item-delay: .10s; }
.navmenu .overlay li:nth-child(3) { --navmenu-item-delay: .15s; }
.navmenu .overlay li:nth-child(4) { --navmenu-item-delay: .20s; }
.navmenu .overlay li:nth-child(5) { --navmenu-item-delay: .25s; }
.navmenu .overlay li:nth-child(6) { --navmenu-item-delay: .30s; }

.navmenu .overlay a {
  display: block;
  padding: 18px 0;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
  color: #fff;
}
.navmenu .overlay a:hover { opacity: .85; }

/* Zamez scrollu podkladu při otevření menu */
body.navmenu-open { overflow:hidden; }

/* ===== PROJECT DETAIL ===== */
.back-link{
  display:none;
}
.project-detail .back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.project-detail .back-link:hover{color:var(--ink);}
.project-detail main{
  padding:24px 0 72px;
}
.project-detail article.project{
  padding-left:var(--pad-lr);
  padding-right:var(--pad-lr);
  display:flex;
  flex-direction:column;
  gap:var(--space-h2-sections);
}
.project-detail .project-wrapper{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--space-workprojects-text-img);
}
.project-detail .project-header{
  display:flex;
  flex-direction:column;  
}
.project-detail .project-meta{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.7rem;
  color:var(--muted);
}
.project-detail .project-header h2{
  margin:0;
  font-size:16px;
  letter-spacing:.03em;
}
.project-detail .project-details{
  margin:0;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  padding:24px;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
}
.project-detail .project-details dt{
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 6px;
}
.project-detail .project-details dd{
  margin:0;
  font-weight:500;
}
.project-detail .project-content{
  display:flex;
  flex-direction:column;
  gap:var(--space-workprojects-text-img);
}
.project-detail .block{
  display:flex;
  flex-direction:column;
}
.project-detail .block--text{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.project-detail .block--text p{
  margin:0;
}
.project-detail .block--text h1,
.project-detail .block--text h2,
.project-detail .block--text h3,
.project-detail .block--text h4{
  margin:0;
  font-weight:600;
  letter-spacing:.02em;
}
.project-detail .block--text h1{font-size:1.6rem;}
.project-detail .block--text h2{font-size:1.4rem;}
.project-detail .block--text h3{font-size:1.2rem;}
.project-detail .block--text h4{font-size:1rem;text-transform:uppercase;letter-spacing:.12em;}
.project-detail .block--text pre{
  margin:0;
  padding:16px;
  border-radius:16px;
  background:#111;
  color:#f5f5f5;
  font-family:"JetBrains Mono","Fira Code",monospace;
  font-size:.85rem;
  overflow:auto;
}
.project-detail .block--text :not(pre) > code{
  display:inline-block;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(17,17,17,.08);
  font-family:"JetBrains Mono","Fira Code",monospace;
  font-size:.85rem;
}
.project-detail .block--image{
  margin:0;
  background:#f0f0f0;
}
.project-detail .block--image img{
  width:100%;
  display:block;
}
.project-detail .block--text-image{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.project-detail .project-links{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.project-detail .project-links h2{
  margin:0;
  font-size:1.1rem;
  letter-spacing:.04em;
}
.project-detail .project-links-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.project-detail .project-links-list a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.project-detail .project-links-list a:hover{opacity:.85;}
.project-detail .empty-state{
  width:var(--wrap);
  margin:120px auto;
  text-align:center;
  color:var(--muted);
}

/* ===== UTIL ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}