/* ==========================================================================
   Darkr Studio — darkrstudio.cz

   Tmavá varianta = hluboká studená modročerň #060F15 z handoffu. Šedá #4A4A4A
   z logo listu tu byla jeden den (2026-09-02) a Jirka se vrátil zpátky — na šedé
   ztrácely tlumené odstíny kontrast a působila korporátně. Zlatá je jediná
   akcentní barva a je to ta z loga: #C5A05A (na tmavé 7,9:1, takže ji netřeba
   zesvětlovat). Typografie je jednotná — všechno Archivo, kontrast dělá velikost
   a váha, ne druhý font.
   Světlá varianta = odvozená: teplý papír místo tmavé modři, tmavší zlatá na
   text (čistá #F2B434 má na světlém pozadí bídný kontrast; jako výplň tlačítka
   zůstává). Přepínač píše data-theme na <html>, volba se pamatuje.

   Bez radiusů, bez stínů. Rohy jsou zkosené (clip-path), ne zakulacené.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
  --bg-deep: #060F15;
  --bg-card: #0A1A24;
  --bg-card-hover: #0C2130;
  --bg-section: #04090D;
  --bg-nav: rgba(0, 0, 0, .92);   /* horní lišta je černá, ne modročerná */

  --ink: #ECE6DA;
  --ink-72: rgba(236, 230, 218, .72);
  --ink-66: rgba(236, 230, 218, .66);
  --ink-62: rgba(236, 230, 218, .62);
  --ink-60: rgba(236, 230, 218, .60);
  --ink-55: rgba(236, 230, 218, .55);
  --ink-52: rgba(236, 230, 218, .52);
  --ink-50: rgba(236, 230, 218, .50);
  --ink-45: rgba(236, 230, 218, .45);
  --ink-42: rgba(236, 230, 218, .42);
  --ink-40: rgba(236, 230, 218, .40);
  --ink-38: rgba(236, 230, 218, .38);

  --line-07: rgba(236, 230, 218, .07);
  --line-08: rgba(236, 230, 218, .08);
  --line-09: rgba(236, 230, 218, .09);
  --line-10: rgba(236, 230, 218, .10);
  --line-20: rgba(236, 230, 218, .20);

  --accent: #C5A05A;         /* jediný akcent — zlatá z loga */
  --accent-text: #C5A05A;    /* na tmavé má 7,9:1, zesvětlovat netřeba */
  --accent-hover: #E0BE84;
  --on-accent: #060F15;      /* text na zlaté ploše */
  --accent-12: rgba(197, 160, 90, .12);
  --accent-35: rgba(197, 160, 90, .35);
  --accent-50: rgba(197, 160, 90, .50);
  --accent-55: rgba(197, 160, 90, .55);
  --accent-70: rgba(197, 160, 90, .70);
  --accent-75: rgba(197, 160, 90, .75);
  --accent-85: rgba(197, 160, 90, .85);
  --accent-hairline: rgba(197, 160, 90, .5);

  --mark: #C5A05A;           /* značka — zlatá z loga, ne z akcentu */

  --lab-text: rgba(120, 200, 220, .85);
  --lab-bg: rgba(120, 200, 220, .08);
  --lab-border: rgba(120, 200, 220, .28);

  --hero-gradient: radial-gradient(120% 80% at 50% -10%, #0D2230 0%, #081620 45%, #050D12 100%);
  --kontakt-gradient: linear-gradient(180deg, #060F15 0%, #081821 100%);

  --grain-op: .055;

  --font-head: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg-deep: #F6F2EA;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFFDF7;
  --bg-section: #EFE9DC;
  --bg-nav: rgba(246, 242, 234, .86);

  --ink: #14212B;
  --ink-72: rgba(20, 33, 43, .80);
  --ink-66: rgba(20, 33, 43, .74);
  --ink-62: rgba(20, 33, 43, .72);
  --ink-60: rgba(20, 33, 43, .70);
  --ink-55: rgba(20, 33, 43, .64);
  --ink-52: rgba(20, 33, 43, .64);
  --ink-50: rgba(20, 33, 43, .62);
  --ink-45: rgba(20, 33, 43, .58);
  --ink-42: rgba(20, 33, 43, .55);
  --ink-40: rgba(20, 33, 43, .54);
  --ink-38: rgba(20, 33, 43, .52);

  --line-07: rgba(20, 33, 43, .10);
  --line-08: rgba(20, 33, 43, .11);
  --line-09: rgba(20, 33, 43, .13);
  --line-10: rgba(20, 33, 43, .14);
  --line-20: rgba(20, 33, 43, .24);

  --accent-text: #8A5E06;    /* zlatá z loga je na papíru nečitelná */
  --accent-hover: #66440A;
  --accent: #C5A05A;
  --accent-12: rgba(242, 180, 52, .20);
  --accent-35: rgba(198, 140, 20, .45);
  --accent-50: rgba(198, 140, 20, .55);
  --accent-55: rgba(198, 140, 20, .60);
  --accent-70: #96670A;
  --accent-75: #8A5E06;
  --accent-85: #7A5205;
  --accent-hairline: rgba(198, 140, 20, .55);

  --mark: #96670A;           /* na papíru je zlatá z loga bledá */

  --lab-text: #156374;
  --lab-bg: rgba(120, 200, 220, .16);
  --lab-border: rgba(21, 99, 116, .32);

  --hero-gradient: radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, #F5EFE3 45%, #EFE7D7 100%);
  --kontakt-gradient: linear-gradient(180deg, #F6F2EA 0%, #EDE4D2 100%);

  --grain-op: .05;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg-deep);
}

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 260ms ease, color 260ms ease;
}

/* Jemné zrno přes celou plochu. Jeden inline SVG, žádný obrázek ke stažení.
   pointer-events: none — nikdy nechytá kliknutí. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }

/* Značka je inline SVG (inc/mark.php) — jeden symbol, tři použití. Barvu bere
   z --mark, takže se s motivem překlopí sama; velikost se řídí VÝŠKOU, protože
   viewBox je těsně na tvar a šířka z něj vyplyne. */
.mark-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.mark {
  display: block;
  width: auto;
  color: var(--mark);
  fill: currentColor;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

/* fixní nav nesmí zakrývat nadpisy při skoku na kotvu */
section[id] { scroll-margin-top: 72px; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ------------------------------------------------- přepínač jazyka a motivu */

.utils {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Pozor na specificitu: níž je `.hero > *  { position: relative }`, které má
   stejnou váhu a stojí v souboru později — proto se selektor musí vázat na
   .hero, jinak přepínače spadnou do gridu heru a rozhodí rozvržení. */
.hero > .utils-hero {
  position: absolute;
  top: clamp(14px, 3vh, 30px);
  right: clamp(20px, 5vw, 60px);
  z-index: 3;
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-38);
}

.lang a { color: var(--ink-55); transition: color 200ms ease; }
.lang a.on { color: var(--accent-text); }
.lang a:hover { color: var(--accent-hover); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-20);
  color: var(--ink-55);
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.theme-toggle:hover {
  color: var(--accent-text);
  border-color: var(--accent-55);
}

:root[data-theme="light"] .theme-toggle svg { transform: rotate(180deg); }

/* --------------------------------------------------------------- sticky nav */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 56px);
  background: var(--bg-nav);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-09);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
}

/* Jemné vlny v liště — značka je žraločí zub, takže moře. Vzor je vysázený
   tak, aby perioda dělila šířku dlaždice, jinak by na spojích vznikaly švy.
   Nekliká se na něj a při 10 % krytí jen naznačuje texturu. */
.nav::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='52' viewBox='0 0 160 52'%3E%3Cg fill='none' stroke='%23C5A05A' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M0 9 q 40 -7 80 0 t 80 0' opacity='.85'/%3E%3Cpath d='M0 21 q 20 7 40 0 t 40 0 t 40 0 t 40 0' opacity='.5'/%3E%3Cpath d='M0 33 q 40 7 80 0 t 80 0' opacity='.7'/%3E%3Cpath d='M0 44 q 20 -7 40 0 t 40 0 t 40 0 t 40 0' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 52px;
}

:root[data-theme="light"] .nav::after { opacity: .16; }

.nav > * { position: relative; z-index: 1; }

.nav.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.nav-brand .mark { height: 18px; }

.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 30px);
  min-width: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-66);
  white-space: nowrap;
  transition: color 200ms ease;
}

.nav-links a:hover { color: var(--accent-text); }
.nav-links a.is-accent { color: var(--accent-text); }
.nav-links a.is-accent:hover { color: var(--accent-hover); }

/* Jediná media query v layoutu, a jen pro navigaci: na úzkém displeji se čtyři
   odkazy vedle značky nevejdou a odsouvaly by se vodorovně (což nikdo nenajde).
   Značka se zkrátí na znak a přepínače v navigaci zmizí — v heru a v patičce
   zůstávají. Zbytek webu je fluidní bez breakpointů. */
@media (max-width: 620px) {
  .nav { padding: 12px 16px; }
  .nav-brand span { display: none; }
  .nav-links { gap: 13px; }
  .nav-links a { font-size: 11px; letter-spacing: .06em; }
  .utils-nav { display: none; }
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(18px, 3.2vh, 52px) clamp(20px, 5vw, 60px);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-gradient);
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-hairline), transparent);
  z-index: 1;
}

.hero > * { position: relative; z-index: 2; }

/* V heru je jen logo — značka a název, nic víc (zadání Jirky 2026-09-02).
   Obojí ve zlaté z loga, na šedé; jako velký text má 3,6:1, což pro tuhle
   velikost stačí (WCAG AA bere velký text od 3:1). */
/* Logo patří do HORNÍ poloviny plochy, i na mobilu — proto se obsah neřídí
   svislým středem, ale odsazením od horní hrany. Třetí řada v mřížce by byla
   past: v toku jsou jen dva prvky, takže by se odrážka roztáhla do prostřední. */
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(28px, 10vh, 120px);
  text-align: center;
  gap: clamp(16px, 3vh, 34px);
}

/* Jediná věta v heru. Kostně bílá, ne zlatá — zlatá zůstává akcentem.
   Odstup navíc, aby claim nesplýval s podtitulkem, který je součástí loga. */
.hero-claim {
  margin-top: clamp(10px, 2.2vh, 26px);
  max-width: 30ch;
  font-size: clamp(15px, 2.1vw, 22px);
  line-height: 1.45;
  color: var(--ink-72);
}

.hero-mark {
  height: clamp(96px, 13vw, 168px);
}

/* Název je obtah (inc/mark.php), ne text — proporce loga i tracking jsou
   zapečené v cestě, takže tady se řídí jen velikost. */
.hero-wordmark {
  display: flex;
  justify-content: center;
  color: var(--mark);
}

.wordmark {
  display: block;
  height: auto;
  fill: currentColor;
}

.wordmark-line  { width: min(74vw, 940px); }
.wordmark-stack { display: none; }

/* Na úzkém displeji by jednořádkový název byl nečitelně malý (na 375 px asi
   27 px na výšku), tak se přepne na skládanou variantu. */
@media (max-width: 620px) {
  .wordmark-line  { display: none; }
  .wordmark-stack { display: block; width: min(66vw, 330px); }
}

.hero-bottom {
  display: flex;
  justify-content: flex-start;
  padding-bottom: clamp(8px, 3vh, 28px);
}

.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-72);
  border-bottom: 1px solid var(--accent-35);
  padding-bottom: 6px;
  transition: color 200ms ease, border-color 200ms ease, gap 200ms ease;
}

.hero-scroll:hover {
  color: var(--accent-text);
  border-color: var(--accent);
  gap: 20px;
}

/* ------------------------------------------------------------ 01 — katalog */

.katalog { padding: clamp(72px, 14vh, 180px) clamp(20px, 5vw, 72px); }

.katalog-inner { max-width: 1320px; margin: 0 auto; }

.katalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 6vw, 72px);
}

.katalog-head-left { max-width: 620px; display: flex; flex-direction: column; gap: 18px; }

.katalog h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 5.4vw, 62px);
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.katalog-head-left p {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--ink-66);
}

.katalog-count {
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.2vw, 30px);
  padding-top: 0;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line-09);
  color: inherit;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.project-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-55);
  transform: translateY(-3px);
  color: inherit;
}

/* Náhled webu. Dole se rozplývá do barvy dlaždice, takže nemá tvrdou hranu
   a text pod ním nikde nesoupeří s obrázkem. Ve klidu je ztmavený a odbarvený,
   na hover se probere — to je ten „přechod". */
.project-shot {
  display: block;
  position: relative;
  margin: 0 calc(-1 * clamp(20px, 2.2vw, 30px));
  overflow: hidden;
}

.project-shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(.45) brightness(.72);
  transform: scale(1.01);
  transition: filter 300ms ease, transform 400ms ease;
}

.project-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 30%),
    linear-gradient(180deg, transparent 45%, var(--bg-card) 100%);
  transition: background 220ms ease;
}

.project-card:hover .project-shot img {
  filter: grayscale(0) brightness(.92);
  transform: scale(1.05);
}

.project-card:hover .project-shot::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, transparent 30%),
    linear-gradient(180deg, transparent 45%, var(--bg-card-hover) 100%);
}

.project-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -10px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  background: currentColor;
  flex: 0 0 auto;
}

.badge-done {
  color: var(--ink-62);
  background: transparent;
  border: 1px solid var(--line-20);
}

.badge-wip {
  color: var(--accent-text);
  background: var(--accent-12);
  border: 1px solid var(--accent-50);
}

.badge-lab {
  color: var(--lab-text);
  background: var(--lab-bg);
  border: 1px solid var(--lab-border);
}

.project-year {
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--ink-38);
}

.project-card h3 {
  margin-top: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.05;
  letter-spacing: -.015em;
}

.project-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-62);
}

.project-tech {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-08);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* ------------------------------------------------------------- 02 — proces */

.proces {
  background: var(--bg-section);
  border-top: 1px solid var(--line-07);
  border-bottom: 1px solid var(--line-07);
  padding: clamp(80px, 16vh, 200px) clamp(20px, 5vw, 72px);
}

.proces-inner { max-width: 1100px; margin: 0 auto; }

.proces-head {
  max-width: 640px;
  margin-bottom: clamp(44px, 8vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.proces h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 5.4vw, 62px);
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

/* Osa procesu. Čtyři kroky vedle sebe na jedné linii, ne roztažený seznam pod
   sebou (ten měl každý krok na celou šířku a blok byl tři obrazovky dlouhý).
   Linka je jeden ::before přes celou mříž, čísla na ní sedí. Pod 760 px se osa
   překlopí do svislé, protože čtyři sloupce textu se na mobil nevejdou. */
.axis {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vw, 38px);
  padding-top: 30px;
}

.axis::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-50), var(--line-10));
}

.axis-step { position: relative; }

.axis-num {
  position: absolute;
  top: -30px;
  left: 0;
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--accent-text);
  background: var(--bg-section);
  padding-right: 10px;
  line-height: 17px;
}

.axis-step h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.2;
  margin-bottom: 10px;
}

.axis-step p {
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.6;
  color: var(--ink-66);
}

.proces-note {
  margin-top: clamp(36px, 6vw, 64px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line-10);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}

.proces-note span {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.proces-note strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--accent-text);
}

@media (max-width: 760px) {
  .axis {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
  }
  .axis::before { display: none; }
  .axis-step {
    padding: 22px 0 22px 44px;
    border-top: 1px solid var(--line-10);
  }
  .axis-num {
    top: 22px;
    left: 0;
    background: none;
    padding: 0;
  }
}

/* ---------------------------------------------------------------- 03 — lab */

.lab { padding: clamp(64px, 12vh, 150px) clamp(20px, 5vw, 72px); }

.lab-inner { max-width: 1320px; margin: 0 auto; }

.lab-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.lab .eyebrow { color: var(--accent-75); }

/* Lab má stejnou váhu jako Weby (přání Jirky) — dřív to byl tišší pás
   drobných karet, teď je to plnohodnotná mříž dlaždic s náhledy. */
.lab h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 5.4vw, 62px);
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: inherit;
}

.lab-head p {
  max-width: 56ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--ink-66);
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.lab-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.2vw, 30px);
  padding-top: 0;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line-09);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.lab-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-55);
  transform: translateY(-3px);
}

/* Bez náhledu nesmí obsah začínat nalepený na horní hraně. */
.lab-card > .lab-card-top:first-child { padding-top: clamp(20px, 2.2vw, 30px); }

.lab-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: -10px;
}

.lab-card h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.05;
  letter-spacing: -.015em;
}

.lab-card:hover .project-shot img {
  filter: grayscale(0) brightness(.92);
  transform: scale(1.05);
}

.lab-card:hover .project-shot::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, transparent 30%),
    linear-gradient(180deg, transparent 45%, var(--bg-card-hover) 100%);
}

.lab-tag {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-70);
  white-space: nowrap;
}

.lab-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-52);
}

/* Karta Labu je tlačítko, ne odkaz — interní systémy nikam nevedou, klik jen
   otevře snímek. Proto se z tlačítka srovnává všechno, co si prohlížeč
   přinesl sám. */
.lab-card--zoom {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  cursor: zoom-in;
}

.lab-card--zoom:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------ zvětšený náhled */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: clamp(16px, 4vw, 56px);
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}

.lightbox::backdrop { background: rgba(5, 10, 14, .88); }

/* Klik vedle obrázku zavírá, proto figure sama kliky nechytá. */
.lightbox figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

.lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100% - 34px);
  border: 1px solid var(--line-09);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.lightbox figcaption {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-70);
}

.lightbox-close {
  position: absolute;
  top: clamp(10px, 2vw, 22px);
  right: clamp(10px, 2vw, 22px);
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-66);
  background: transparent;
  border: 1px solid var(--line-09);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.lightbox-close:hover {
  color: var(--accent);
  border-color: var(--accent-70);
}

/* ------------------------------------------------------------ 04 — kontakt */

.kontakt {
  background: var(--kontakt-gradient);
  padding: clamp(72px, 14vh, 170px) clamp(20px, 5vw, 72px);
}

.kontakt-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 3vw, 32px);
}

.kontakt h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-transform: uppercase;
  max-width: 24ch;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 19px);
  letter-spacing: .02em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: background 200ms ease, gap 200ms ease;
}

.cta:hover { background: var(--accent-hover); color: var(--on-accent); gap: 22px; }

.kontakt-note { font-size: 13.5px; color: var(--ink-45); }

/* ---------------------------------------------------------------- logotypy */
/* Stejná mříž jako Weby, ale panel s logem je ČISTĚ BÍLÝ a bez přechodu:
   loga mají různou polaritu (bílé TGA, tmavé CS SPED) a na barevném nebo
   prosvítajícím podkladu by se některá ztratila. */

.logotypy {
  background: var(--bg-section);
  padding: clamp(72px, 14vh, 180px) clamp(20px, 5vw, 72px);
}

.logotypy-inner { max-width: 1320px; margin: 0 auto; }

.logotypy-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 620px;
  margin-bottom: clamp(36px, 6vw, 72px);
}

.logotypy h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 5.4vw, 62px);
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.logotypy-head p {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--ink-66);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.logo-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px);
  background: var(--bg-card);
  border: 1px solid var(--line-09);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.logo-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-55);
  transform: translateY(-3px);
}

.logo-plate {
  display: block;
  margin: 0 calc(-1 * clamp(20px, 2.2vw, 30px));
  background: #fff;
}

.logo-plate img {
  display: block;
  width: 100%;
  height: auto;
}

.logo-card figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.logo-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(17px, 1.9vw, 21px);
  letter-spacing: -.01em;
}

.logo-year {
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--ink-38);
  flex: 0 0 auto;
}

.logo-note {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-62);
}

/* ------------------------------------------------------- kontaktní formulář */
/* Zkosené rohy přes clip-path, žádné radiusy — stejný jazyk jako zbytek webu. */

.kontakt-lead {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--ink-60);
  max-width: 48ch;
}

.kontakt-form {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-field { display: flex; flex-direction: column; gap: 7px; }

.form-field > span {
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--bg-card);
  border: 1px solid var(--line-20);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: border-color 160ms ease, background 160ms ease;
}

.form-field textarea { resize: vertical; min-height: 120px; }

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent-55);
  background: var(--bg-card-hover);
}

.form-field input:focus-visible,
.form-field textarea:focus-visible { outline: 2px solid var(--accent-55); outline-offset: 2px; }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
}

.kontakt-form .cta { border: 0; cursor: pointer; }

/* Past na roboty. Musí zůstat ve stránce a být odeslatelná, takže žádné
   display:none — jen se odsune mimo plochu. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  width: 100%;
  max-width: 680px;
  padding: 14px 18px;
  text-align: left;
  font-size: 15px;
  border-left: 2px solid;
  background: var(--bg-card);
}

.form-note-ok  { border-color: var(--accent); color: var(--ink); }
.form-note-err { border-color: #E0705A; color: var(--ink); }


@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ footer */

.footer {
  padding: clamp(28px, 4vw, 44px) clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--line-08);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-72);
}

.footer-brand .mark { height: 21px; }

.footer-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  font-size: 12.5px;
  color: var(--ink-42);
}

.footer-right a { color: var(--ink-60); }
.footer-right a:hover { color: var(--accent-text); }

/* ----------------------------------------------------------- scroll reveal */
/* Bez JS je obsah vidět. Skrývá se teprve když se přihlásí JS (.js na <html>). */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.22, .7, .2, 1), transform 620ms cubic-bezier(.22, .7, .2, 1);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .nav, body { transition: none; }
}