/* =========================================================================
   ONSWERK — DESIGN TOKENY
   Jediný zdroj systémových hodnot. Nic v projektu nesmí definovat vlastní
   barvu, mezeru, velikost písma ani prokládání mimo tento soubor.

   Tři vrstvy, které se nesmějí míchat:
     1. BRAND     — doslova z brand/08_PALETA/onswerk_sRGB.json. Neměnit.
     2. INTERFACE — hodnoty odvozené pro web tam, kde brand nic neurčuje.
                    U každé je uvedeno, z čeho je odvozená.
     3. ROLE      — sémantické názvy, které používají komponenty.

   DVĚ VÝJIMKY, obě záměrné a obě dohledatelné:
     · Proměnné --e01-* (geometrie symbolu) se do stylopisu vkládají
       GENEROVANĚ hned za tímto souborem. Zdroj je brand/01_MASTER/
       konstrukce.json, převod dělá scripts/lib/brand.mjs. Ručně se
       nepíšou právě proto, aby se nemohly rozejít s brand balíčkem.
     · --axis-gap žije v grammar.css, protože je z --e01-gap odvozený.

   PRAVIDLO ORANŽOVÉ (--color-brand)
   Oranžová není akcent, je to událost. Smí označit jen okamžik, kdy se
   něco rozhoduje nebo mění:
     · zaostření a výběr textu (uživatel právě něco volí),
     · aktivní položka navigace a zapnutý filtr (volba, která už padla),
     · adresa na kontaktu (jediné místo, kde se web mění ve vztah),
     · vlastní kurzor nad interaktivním prvkem,
     · aktivní kotva a otevřená skupina filtru ve druhé úrovni navigace,
     · bod na mapě, na který uživatel právě ukazuje.
   Kdekoli jinde je oranžová vada. Když je všude, není nikde.
   ========================================================================= */

:root {
  /* --- 1. BRAND (brand/08_PALETA/onswerk_sRGB.json, verze 2.0) ----------- */
  --brand-orange: #ff5500;      /* Mystic Orange — primární            */
  --brand-charcoal: #33332d;    /* Black Powder  — primární            */
  --brand-white: #ffffff;       /* White         — primární            */
  --brand-black: #000000;       /* Black — monochrom; web ho nepoužívá,
                                   patří ale do palety a zůstává tu jako
                                   úplný záznam značky                   */
  --brand-olive: #727265;       /* Bonsai Trunk  — doplňková           */
  --brand-warm-gray: #dadad0;   /* Pastel Tower  — doplňková           */

  /* Ochranný prostor logotypu W01: clear/width = 104/803 z konstrukce.json */
  --brand-logo-clear: 0.1295;

  /* --- 2. INTERFACE: odvozené neutrály --------------------------------- */
  /* linka   = Pastel Tower 55 % na bílé  → kontrast 1,20 (dekorativní)    */
  --ui-rule-light: #ebebe5;
  /* plocha  = Pastel Tower 28 % na bílé  → kontrast 1,09 (pasparta)       */
  --ui-surface-light: #f5f5f2;
  /* tmavý režim brand neřeší; ztmavená varianta Black Powder             */
  --ui-bg-dark: #1a1a16;
  --ui-fg-dark: #f1f1ea;        /* kontrast 15,38 na --ui-bg-dark          */
  --ui-muted-dark: #a9a99c;     /* kontrast  7,35 na --ui-bg-dark          */
  --ui-surface-dark: #282823;

  /* --- 3. ROLE: světlý režim ------------------------------------------- */
  --color-bg: var(--brand-white);
  --color-fg: var(--brand-charcoal);        /* 12,71 : 1 */
  --color-fg-muted: var(--brand-olive);     /*  4,87 : 1 — splňuje AA      */
  /* Nejtišší text webu. 2,99 : 1, tedy pod AA i pod hranicí 3 : 1 pro
     velké písmo: smí nést jen údaj, který nikdo nemusí přečíst, aby web
     použil (copyright v patičce). Nikdy odkaz, popisek ani obsah. */
  --color-fg-quiet: #96968a;
  --color-rule: var(--ui-rule-light);
  --color-surface: var(--ui-surface-light);
  --color-brand: var(--brand-orange);
  /* Text na oranžové ploše: bílá dává 3,21 : 1 — platí jen pro velké písmo
     a výběr textu, nikdy pro běžnou sazbu. */
  --color-on-brand: var(--brand-white);
  --color-focus: var(--brand-orange);

  color-scheme: light;

  /* --- typografická stupnice ------------------------------------------- */
  --font-sans: 'Inter var', 'Inter', system-ui, -apple-system, 'Segoe UI',
    Helvetica, Arial, sans-serif;

  --fs-2xs: 0.8125rem;   /* 13px — anotace, popisky, štítky               */
  --fs-sm: 0.9375rem;    /* 15px — navigace, tlačítka, sekundární text    */
  --fs-md: 1.0625rem;    /* 17px — základní text                          */
  --fs-lg: clamp(1.05rem, 1.6vw, 1.25rem);       /* lede                  */
  --fs-xl: clamp(1.15rem, 2vw, 1.5rem);          /* podnadpis             */
  --fs-2xl: clamp(1.7rem, 3.4vw, 2.6rem);        /* nadpis sekce          */
  --fs-3xl: clamp(2.2rem, 6vw, 4.6rem);          /* nadpis stránky        */
  /* tři věty na úvodní stránce vedle sebe; na telefonu se sází pod sebe */
  --fs-statement: clamp(2.1rem, 4.75vw, 7rem);

  /* prokládání — čtyři stupně, ne osm */
  --tracking-tight: -0.045em;
  --tracking-snug: -0.035em;
  --tracking-normal: -0.02em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.09em;

  --leading-tight: 1.06;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --weight-regular: 400;
  --weight-medium: 500;  /* navigace 1. úrovně, zvolená položka */
  --weight-semibold: 600;

  /* --- prostorová stupnice --------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* rytmus sekcí — tři stupně, plynulé */
  --space-block: clamp(32px, 5vw, 56px);
  --space-section: clamp(48px, 7vw, 96px);
  --space-page: clamp(64px, 9vw, 128px);

  --gutter: clamp(20px, 4vw, 48px);
  --icon-size: 18px;                         /* ovládací ikony v hlavičce     */
  --container: 1280px;
  /* Mřížka navigace: šest sloupců přes celou šířku okna (logo + pět sekcí).
     Druhá úroveň navigace a seznam projektů sdílejí tytéž sloupce. */
  --cols: 6;
  --col-gap: clamp(16px, 2vw, 32px);
  --measure: 34em;        /* šířka odstavce                                */
  --measure-wide: 62em;

  /* --- pohyb ------------------------------------------------------------ */
  --motion-fast: 0.15s;
  --motion-base: 0.25s;
  --motion-slow: 0.5s;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- obraz ------------------------------------------------------------ */
  --ratio-band: 1.4142;   /* √2 — formát A na šířku, shodně s výkresy      */
}

/* Tmavý režim je druhý STAV téhož designu, ne druhý design:
   mění se výhradně hodnoty rolí, nikdy pravidla komponent.

   VÝCHOZÍ JE SVĚTLÝ REŽIM, a to i pro návštěvníka, který má v systému
   zapnutý tmavý. Je to vědomé rozhodnutí majitele: web ukazuje architekturu
   a výkresy, ty jsou kreslené na bílou. Tmavý režim se zapne jedině
   přepínačem v hlavičce a jeho volba se pamatuje.

   Proto tu NENÍ pravidlo na prefers-color-scheme. Jediné, co tmavý režim
   zapíná, je atribut data-theme="dark". */
:root[data-theme='dark'] {
  --color-bg: var(--ui-bg-dark);
  --color-fg: var(--ui-fg-dark);
  --color-fg-muted: var(--ui-muted-dark);
  --color-fg-quiet: #7d7d70;                /* 4,19 : 1 na tmavém pozadí   */
  --color-rule: var(--brand-charcoal);
  --color-surface: var(--ui-surface-dark);
  color-scheme: dark;
}

/* =========================================================================
   BREAKPOINTY — čtyři, odvozené od obsahu, ne od modelů telefonů.
   CSS neumí proměnnou v @media, proto jsou hodnoty psané číselně;
   tenhle komentář je jejich jediná definice.

     sm   640px   jednosloupcová sazba → dva sloupce (mozaika, dlaždice)
     md   768px   vedle sebe se vejdou tři karty (tým, města, entity)
     lg   960px   text a obraz vedle sebe (kapitoly, pásmo projektu)
     xl  1080px   mozaika ve třech sloupcích
   ========================================================================= */

/* =========================================================================
   GENEROVÁNO BUILDEM z brand/01_MASTER/konstrukce.json (E01 1.0).
   Needituj ručně — přepiš brand master a spusť build.
   ========================================================================= */
:root {
  --e01-slope: 0.5800;
  --e01-angle: 59.886deg;
  --e01-tilt: 30.114deg;
  --e01-hyp: 1.1560;
  --e01-gap: 0.03718;
  --e01-bar-ratio: 1.2600;
  --e01-ratio: 2.1400;
  --e01-bar-clip: polygon(46.0317% 0%, 100% 0%, 53.9683% 100%, 0% 100%);
}

/* =========================================================================
   ONSWERK — ZÁKLAD: písmo, reset, typografické role, stavy
   Typografická role je definována právě jednou a platí na celém webu.
   ========================================================================= */

/* Inter, self-hostovaný podřez (Latin + Latin Extended A/B).
   Nahrazuje dřívější externí požadavek na fonts.googleapis.com:
   jeden soubor místo dvou cizích spojení, žádné předávání IP třetí straně. */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/InterVariable-subset.woff2') format('woff2');
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--motion-base) ease, color var(--motion-base) ease;
}

h1, h2, h3, h4, p, figure, dl, dd, blockquote {
  margin: 0;
}

::selection {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

img,
svg {
  max-width: 100%;
}

/* --- odkazy a interaktivní stavy — jedna definice pro celý web ---------- */
a {
  color: inherit;
  text-decoration: none;
}

.prose a,
.t-body a,
.imprint a {
  border-bottom: 1px solid var(--color-rule);
  transition: border-color var(--motion-fast) ease;
}
.prose a:hover,
.t-body a:hover,
.imprint a:hover {
  border-color: var(--color-brand);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Minimální dotyková plocha. Prvky, které jsou vizuálně drobné, dostávají
   neviditelný přesah, aby splnily WCAG 2.5.8 (24 × 24 px). */
.tap {
  position: relative;
}
.tap::after {
  content: '';
  position: absolute;
  inset: -8px -6px;
}

/* --- typografické role -------------------------------------------------- */
.t-display {
  font-size: var(--fs-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.04;
  text-wrap: balance;
}

.t-title {
  font-size: var(--fs-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.t-subhead {
  font-size: var(--fs-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}

.t-lede {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--color-fg-muted);
  max-width: var(--measure);
}

.t-body {
  font-size: var(--fs-md);
  line-height: var(--leading-relaxed);
  max-width: var(--measure);
}

.t-annot {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  line-height: 1.5;
  color: var(--color-fg-muted);
}

.t-label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* --- pomocné rozvržení -------------------------------------------------- */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Skryté vizuálně, ne sémanticky. Používá se tam, kde by viditelný nadpis
   jen opakoval, co už říká navigace — stránka ale nadpis mít musí, jinak
   ho nemá ani čtečka a ani vyhledávač. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--color-fg);
  color: var(--color-bg);
  padding: var(--space-2) var(--space-4);
}
.skip:focus {
  left: var(--gutter);
}

/* --- pohyb --------------------------------------------------------------
   Obsah se NIKDY neskrývá jen proto, že má třídu .rv. Skrytý je výhradně
   prvek, který skript sám natáhl (.rv--armed) a ještě neodhalil. Když se
   skript nenačte nebo spadne dřív, zůstane všechno vidět — animace je
   ozdoba, ne podmínka čitelnosti. */
.rv {
  transition: opacity var(--motion-slow) ease, transform var(--motion-slow) ease;
}
.rv--armed {
  opacity: 0;
  transform: translateY(10px);
}
.rv--armed.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rv,
  .rv--armed {
    opacity: 1;
    transform: none;
  }
}

/* Tisk: žádné animace, žádné skryté sekce, žádné ovládací prvky. */
@media print {
  .rv,
  .rv--armed {
    opacity: 1 !important;
    transform: none !important;
  }
  .site-head,
  .site-foot,
  .half__nav,
  .skip {
    display: none !important;
  }
}

/* =========================================================================
   ONSWERK — DIGITÁLNÍ GRAMATIKA

   Značka má dva tvary: kruh a pruh. Tenhle soubor z nich dělá abecedu,
   kterou web umí psát i tam, kde není vidět logotyp.

     ●   kruh    poloha, člověk, místo, začátek, ohnisko, přítomnost, volba
     ⟋   pruh    směr, zásah, řez, hranice, pohyb, přechod, rozhodnutí

   Čísla nejsou odhadnutá. Proměnné --e01-* generuje build ze souboru
   brand/01_MASTER/konstrukce.json (viz scripts/lib/brand.mjs), takže
   sklon na webu je doslova sklon symbolu, ne přibližné lomítko.

   Značení původu podle zadání:
     A  závazné pravidlo z brand manuálu
     B  digitální princip odvozený z A
     C  nová art direction tohoto webu
   ========================================================================= */

/* --- A: pruh ------------------------------------------------------------
   Pruh je čtyřúhelník z masteru, přenesený do CSS jako
   clip-path v procentech opsaného obdélníku. Proto musí mít každý prvek
   s třídou .bar-shape poměr stran --e01-bar-ratio, jinak se úhel zkreslí. */
.bar-shape {
  aspect-ratio: var(--e01-bar-ratio);
  clip-path: var(--e01-bar-clip);
  background: currentColor;
}

/* --- B: svislá osa -------------------------------------------------------
   Symbol je kruh vlevo, pruh vpravo a mezi nimi mezera. Obrazovka je
   složená stejně. Mezeru osy používá stránka 404 (.notfound). */
:root {
  --axis-gap: clamp(24px, calc(100vw * var(--e01-gap) * 1.6), 76px);
}

/* --- C: tečka jako interpunkce značky ------------------------------------
   Motto má tři tečky a symbol má jeden kruh. Je to tentýž tvar, proto se
   tečka nikdy neztrácí v barvě okolního textu. Zvýrazňuje ji kontrast,
   ne oranžová: oranžová je vyhrazená okamžiku rozhodnutí (viz tokens.css). */
.stop {
  color: var(--color-fg);
}

/* =========================================================================
   C: KURZOR — ● vlevo od osy, ⟋ vpravo

   Chování, ne ozdoba: kurzor drží tutéž gramatiku jako zbytek webu.
   Tvrdá pravidla, která nesmí porušit:
     · jen přesný ukazovátko (pointer: fine) — na dotyku neexistuje,
     · při prefers-reduced-motion se vůbec nezapne,
     · nad formulářovým polem a při výběru textu se vrací systémový kurzor,
     · nikdy nechytá kliknutí (pointer-events: none),
     · pohybuje se jen transformem, takže nevyvolá přepočet rozvržení,
     · mimo okno se schová.
   Třídu .ow-cursor přidává skript teprve tehdy, když všechny podmínky
   platí. Bez skriptu je kurzor systémový a web se nezmění.
   ========================================================================= */
.cursor {
  --cursor-dot: 10px;
  --cursor-bar: 18px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  display: none;
  pointer-events: none;
  color: var(--color-fg);
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
  transition: opacity var(--motion-fast) ease;
  /* Kurzor je popover="manual" (top layer): zrušit výchozí vzhled popoveru. */
  inset: 0 auto auto 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  /* Tenký lem barvou pozadí — kurzor musí být čitelný i na fotografii. */
  filter: drop-shadow(0 0 1px var(--color-bg));
}
html.ow-cursor .cursor {
  display: block;
}

.cursor__dot,
.cursor__bar {
  position: absolute;
  background: currentColor;
  transition: opacity var(--motion-fast) var(--ease),
    transform var(--motion-fast) var(--ease), background-color var(--motion-fast) ease;
}

/* Oba tvary jsou zakotvené ve stejném bodě — v místě hrotu. Přechod přes
   osu proto není otočka ani proměna tvaru, ale předání: kruh se stáhne do
   bodu a pruh z téhož bodu vyroste. */
.cursor__dot {
  width: var(--cursor-dot);
  height: var(--cursor-dot);
  margin-top: calc(var(--cursor-dot) / -2);
  margin-left: calc(var(--cursor-dot) / -2);
  border-radius: 50%;
}
.cursor__bar {
  height: var(--cursor-bar);
  aspect-ratio: var(--e01-bar-ratio);
  margin-top: calc(var(--cursor-bar) / -2);
  margin-left: calc(var(--cursor-bar) * var(--e01-bar-ratio) / -2);
  clip-path: var(--e01-bar-clip);
}

.cursor__bar,
.cursor.is-bar .cursor__dot {
  opacity: 0;
  transform: scale(0.4);
}
.cursor__dot,
.cursor.is-bar .cursor__bar {
  opacity: 1;
  transform: none;
}

/* Nad odkazem nebo tlačítkem tvar zesílí a zoranžoví. Oranžová se tu
   objevuje jako událost: tohle je místo, kde se dá rozhodnout.
   Selektory jsou psané tak, aby zesílil vždycky jen ten tvar, který je
   zrovna vidět — jinak by se při přejezdu odkazu vpravo zvětšila i tečka. */
.cursor.is-hot .cursor__dot,
.cursor.is-hot .cursor__bar {
  background: var(--color-brand);
}
.cursor.is-hot:not(.is-bar) .cursor__dot {
  transform: scale(1.6);
}
.cursor.is-hot.is-bar .cursor__bar {
  transform: scale(1.25);
}

/* Na oranžové ploše (GDPR, panel pro AI) je kurzor bílý, i v „hot“ stavu. */
.cursor.is-on-brand {
  color: var(--brand-white);
  filter: none;
}
.cursor.is-on-brand.is-hot .cursor__dot,
.cursor.is-on-brand.is-hot .cursor__bar {
  background: var(--brand-white);
}

/* Mimo okno a při výběru textu kurzor mizí. */
.cursor.is-out {
  opacity: 0;
}

/* Systémový kurzor se skrývá jen tam, kde ho nahrazujeme. Formulářová pole
   a editovatelný obsah si ho nechávají — funkce má přednost před značkou. */
html.ow-cursor,
html.ow-cursor a,
html.ow-cursor button,
html.ow-cursor [role='button'] {
  cursor: none;
}
html.ow-cursor input,
html.ow-cursor textarea,
html.ow-cursor select,
html.ow-cursor [contenteditable] {
  cursor: auto;
}
html.ow-cursor.ow-native,
html.ow-cursor.ow-native a,
html.ow-cursor.ow-native button {
  cursor: auto;
}
html.ow-cursor.ow-native .cursor {
  opacity: 0;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce), print {
  .cursor {
    display: none !important;
  }
  html.ow-cursor,
  html.ow-cursor a,
  html.ow-cursor button,
  html.ow-cursor [role='button'] {
    cursor: auto;
  }
}

/* =========================================================================
   ONSWERK — KOMPONENTY
   Každá komponenta bere hodnoty výhradně z tokens.css. Žádná lokální barva,
   žádná lokální mezera, žádný inline styl v šablonách.
   ========================================================================= */

/* =========================================================================
   HLAVIČKA — DVĚ ÚROVNĚ JEDNOHO NAVIGAČNÍHO SYSTÉMU

   1. úroveň: šest sloupců přes celou šířku okna. Logo je první sloupec,
      každá sekce má svou pevnou vodorovnou polohu — jako rozpiska, ne
      jako shluk odkazů v jednom rohu.
   2. úroveň: kontext zvolené sekce ve STEJNÉ mřížce. Kotvy obsahových
      stránek, filtry a pohledy databáze, návrat na stránce projektu.
   Obě úrovně sdílejí sloupce --cols a mezeru --col-gap, takže tvoří jednu
   strukturu, ne hlavní menu a k tomu cizí rozbalovací nabídku.
   ========================================================================= */
.site-head {
  position: relative;
  z-index: 20;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
  transition: background-color var(--motion-base) ease;
}
/* Na telefonu hlavička neputuje s obsahem: tři řádky by vzaly pětinu
   displeje. Od tabletu výš je lepkavá i s druhou úrovní. */
@media (min-width: 768px) {
  .site-head {
    position: sticky;
    top: 0;
  }
}

.head-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
  padding: var(--space-4) var(--gutter);
}

/* Logotyp W01 v podobě schváleného vektoru. Ochranný prostor je odvozený
   z konstrukce loga (clear 104 : šířka 803), ne odhadnutý. */
.logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding-right: calc(var(--logo-width, 104px) * var(--brand-logo-clear));
}
.logo svg {
  display: block;
  width: var(--logo-width, 104px);
  height: auto;
}

.pnav {
  grid-column: 2 / -1;
}
.pnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(calc(var(--cols) - 1), minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.pnav a,
.subnav a,
.wtoggle,
.wview,
.wfilters {
  color: var(--color-fg-muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.pnav a {
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
/* HIERARCHIE: 1. úroveň plnou barvou a o stupeň tučněji, 2. a 3. úroveň
   tlumeně (olivová je nejsvětlejší tón palety, který ještě drží kontrast
   AA) a menším stupněm. Zvolená položka 2. a 3. úrovně přebírá plnou barvu
   a řez 1. úrovně. Důraz dělá řez písma, ne velikost. */
.pnav a {
  color: var(--color-fg);
}
.pnav a:hover {
  border-color: var(--color-rule);
}
.pnav a:hover,
.subnav a:hover,
.wtoggle:hover,
.wview:hover,
.wfilters:hover {
  color: var(--color-fg);
}
/* Oranžová je událost: tady je volba, která už padla. */
.pnav a[aria-current],
.subnav a[aria-current],
.wview[aria-pressed='true'],
.wtoggle[aria-expanded='true'],
.wfilters[aria-expanded='true'] {
  color: var(--color-fg);
  border-color: var(--color-brand);
}
.subnav a[aria-current],
.wview[aria-pressed='true'],
.wtoggle[aria-expanded='true'],
.wfilters[aria-expanded='true'],
.fopt[aria-pressed='true'] {
  font-weight: var(--weight-medium);
}

.controls {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- druhá úroveň --------------------------------------------------------- */
.subnav {
  border-top: 1px solid var(--color-rule);
  padding: var(--space-3) var(--gutter);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
}
.subnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.subnav__list a {
  text-wrap: balance;
}

/* Stránka projektu: návrat — název. Návrat je jediná cesta dál, proto
   plnou barvou a řezem 1. úrovně. */
.subnav--project {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: baseline;
}
.subnav__here {
  grid-column: 2 / 5;
  color: var(--color-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subnav__back {
  grid-column: 1;
  justify-self: start;
  white-space: nowrap;
}
.subnav a.subnav__back {
  color: var(--color-fg);
  font-weight: var(--weight-medium);
}

/* --- databáze: skupiny filtrů, pohledy, nabídka hodnot ---------------- */
.subnav__row {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: baseline;
}
.wgroups {
  grid-column: 1 / -2;
  display: grid;
  grid-template-columns: repeat(calc(var(--cols) - 1), minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.wtoggle,
.wfilters {
  justify-self: start;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-align: left;
}
.wtoggle__n {
  margin-left: 0.4em;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-fg);
}
.wtoggle__n:empty {
  display: none;
}
.wfilters {
  display: none;
}
.wviews {
  grid-column: -2;
  justify-self: end;
  display: flex;
  gap: var(--space-5);
}
.wview {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
}

.wpanel {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: baseline;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}
.wpanel[hidden] {
  display: none;
}
/* Hodnoty začínají pod sloupcem skupiny, ke které patří. */
.wpanel__groups {
  grid-column: var(--open-col, 1) / -2;
  min-width: 0;
}
.wfg {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.wfg.is-open {
  display: block;
}
.wfg legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.wfg__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.fopt {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.fopt:hover {
  color: var(--color-fg);
}
.fopt[aria-pressed='true'] {
  color: var(--color-fg);
  border-color: var(--color-brand);
}
.fopt__n {
  margin-left: 0.35em;
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-muted);
}
.wpanel__status {
  grid-column: -2;
  justify-self: end;
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-muted);
}
.wclear {
  color: var(--color-fg);
  border-bottom: 1px solid var(--color-rule);
}
.wclear:hover {
  border-color: var(--color-brand);
}
/* Bez skriptu filtry nic nedělají, proto se ani neukazují. */
html.no-js .subnav--work {
  display: none;
}

/* --- pod 960 px: stejná myšlenka, jiná geometrie -----------------------
   Logo a ovládání drží první řádek, sekce druhý — pořád rozložené přes
   celou šířku. Druhá úroveň je vodorovný pás, který se dá posunout. */
@media (max-width: 959px) {
  .head-row {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-3);
    padding-block: var(--space-3);
  }
  .controls {
    position: static;
    transform: none;
    grid-column: 2;
    grid-row: 1;
  }
  .pnav {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }
  .pnav__list {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .subnav__list {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .subnav__list::-webkit-scrollbar,
  .pnav__list::-webkit-scrollbar {
    display: none;
  }
  .subnav--project {
    grid-template-columns: auto 1fr;
  }
  .subnav__here {
    grid-column: 2;
  }
  .subnav__row {
    display: flex;
    justify-content: space-between;
  }
  .wgroups {
    display: none;
  }
  .wfilters {
    display: inline-flex;
  }
  /* Na telefonu je nabídka jeden panel se všemi skupinami pod sebou. */
  .wpanel {
    display: block;
  }
  .wpanel__groups {
    max-height: 55svh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .wpanel.is-all .wfg {
    display: block;
  }
  .wfg + .wfg {
    margin-top: var(--space-4);
  }
  .wpanel.is-all .wfg legend {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    margin-bottom: var(--space-2);
  }
  .wpanel__status {
    justify-content: space-between;
    margin-top: var(--space-4);
  }
}
@media (max-width: 639px) {
  .logo {
    --logo-width: 92px;
  }
  .pnav a {
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wide);
  }
  .subnav--project .subnav__here {
    display: none;
  }
}


.controls__btn {
  display: flex;
  align-items: center;
  padding: var(--space-1);
  color: var(--color-fg-muted);
  transition: color var(--motion-fast) ease;
}
.controls__btn:hover,
.controls__btn[aria-expanded='true'] {
  color: var(--color-fg);
}
.controls__btn svg {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}
#theme-toggle svg {
  transition: transform var(--motion-slow) ease;
}
/* Otočení není náhodné číslo: je to úhel pruhu symbolu měřený od svislé.
   Nikdo si toho nevšimne — a přesně proto se na webu neotáčí nic jiným. */
#theme-toggle:hover svg {
  transform: rotate(var(--e01-tilt));
}

.lang {
  position: relative;
}
.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-3));
  z-index: 60;
  min-width: 190px;
  padding: var(--space-2) 0;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  box-shadow: 0 18px 44px rgb(0 0 0 / 12%);
}
.lang__menu[hidden] {
  display: none;
}
.lang__menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}
.lang__menu a:hover {
  color: var(--color-fg);
  background: var(--color-surface);
}
.lang__menu a[aria-current='true'] {
  color: var(--color-fg);
}
.lang__menu .code {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* --- stránkové hlavy ---------------------------------------------------- */
.page {
  padding-block: var(--space-section) var(--space-page);
}
.page-head {
  margin-bottom: var(--space-section);
}
.page-head .t-lede {
  margin-top: var(--space-5);
}

/* Hlava, kterou tvoří jediná věta. Nadpis dostává celou šířku sazby —
   bez podtitulu vedle sebe by polovina stránky zůstala prázdná — a drží
   se v rozumné délce řádku, aby z tvrzení nebyl transparent. */
.page-head--statement .t-display {
  max-width: 16em;
}

/* --- kapitoly ----------------------------------------------------------- */
.chapters {
  margin-top: var(--space-section);
}
.chapter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-rule);
}
.chapter__body p {
  color: var(--color-fg-muted);
  line-height: var(--leading-relaxed);
  max-width: var(--measure);
}
.chapter__body p + p {
  margin-top: var(--space-4);
}
@media (min-width: 960px) {
  .chapter {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
  }
  /* Obraz ke kroku stojí ve sloupci textu, ne vedle nadpisu. */
  .chapter__media {
    grid-column: 2;
  }
}
.chapter__media {
  margin-top: var(--space-6);
}
.chapter__media .mslot:not(.mslot--wide) {
  aspect-ratio: 16 / 9;
}

/* --- projekt: pásmo ----------------------------------------------------- */
/* Výška pásma se nepočítá z odhadnuté výšky hlavičky. Scéna je sloupec
   vysoký jeden viewport, pásmo si vezme zbytek a nikdy nepřeteče přes
   √2 výšku poloviny. Žádná magická konstanta. */
/* Scéna je vysoká přesně tak, jak vysoký je její obsah. Pásmo si vezme
   √2 výšku poloviny, ale nikdy víc, než kolik zbývá pod hlavičkou a nad
   lištou. Obě výšky měří skript a zapisuje je do proměnných níž — nejsou
   odhadnuté. Když skript neběží, platí konzervativní záložní hodnoty. */
.stage {
  display: flex;
  flex-direction: column;
  --header-h: 4.5rem;
  --bar-h: 3rem;
}
/* Do 960 px jdou poloviny pod sebe a každá si drží √2 — pásmo je proto
   vysoké tak, jak vysoký je jeho obsah. Teprve od 960 px stojí vedle sebe
   a pásmo se vejde na jednu obrazovku. */
.band {
  display: grid;
  grid-template-columns: 1fr;
  height: auto;
}
@media (min-width: 960px) {
  .band {
    height: min(
      calc(100vw / var(--ratio-band)),
      calc(100svh - var(--header-h) - var(--bar-h))
    );
  }
  .band--split {
    grid-template-columns: 1fr 1fr;
    height: min(
      calc(50vw / var(--ratio-band)),
      calc(100svh - var(--header-h) - var(--bar-h))
    );
  }
}

/* Snímky leží na čistém podkladu stránky — žádná šedá pasparta
   (zpětná vazba 11. 9. 2026). */
.half {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  min-height: 0;
}
/* Mezi polovinami nevede linka: snímky drží kompozici samy
   (zpětná vazba 12. 9. 2026). */
@media (max-width: 959px) {
  /* aspect-ratio a max-height se nesmějí kombinovat: poměr stran zmenší
     i šířku, takže polovina přestane vyplňovat sloupec. Výška se proto
     počítá přímo. */
  .half {
    height: min(calc(100vw / var(--ratio-band)), calc(100svh - var(--header-h) - var(--bar-h)));
    min-height: 12rem;
  }
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.18s linear;
  pointer-events: none;
}
.slide.is-active {
  opacity: 1;
}
html.no-js .slide {
  position: relative;
  opacity: 1;
}
html.no-js .half {
  overflow: visible;
  aspect-ratio: auto;
}
html.no-js .band {
  max-height: none;
}
.slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
.slide[data-fit='cover'] img {
  object-fit: cover;
}

/* Ovládání pásma je vidět, ne uhodnuté. Tlačítka sedí v polovině výšky
   u krajů. */
.half__nav {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: var(--space-3);
  opacity: 0;
  transition: opacity var(--motion-fast) ease;
}
.half:hover .half__nav,
.half:focus-within .half__nav {
  opacity: 1;
}
html.no-js .half__nav {
  display: none;
}
.half__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--color-fg);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  border: 1px solid var(--color-rule);
}
.half__btn:hover {
  background: var(--color-bg);
}
.half__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Lišta pod pásmem nese jen to, co k pásmu skutečně patří: číslo snímku
   pro každou polovinu. Rozlišuje je POLOHA — levé číslo stojí pod levou
   polovinou, pravé pod pravou. Žádné popisky, žádné rámečky.
   Název projektu odsud zmizel; má své místo u textu a metadat. */
.bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--gutter);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
}
.bar__mid {
  justify-self: center;
}
.bar__count {
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-muted);
}
.bar__count:last-child {
  justify-self: end;
}
/* Bez skriptu se snímky nepřepínají, takže by číslo lhalo. */
html.no-js .bar__count {
  visibility: hidden;
}

/* --- projekt: informační pásmo ------------------------------------------ */
.info {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
  align-items: start;
  padding: var(--space-section) var(--gutter) var(--space-page);
  border-top: 1px solid var(--color-rule);
}
@media (min-width: 960px) {
  .info {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
  }
}
.info .prose {
  max-width: var(--measure-wide);
}
.info .prose p + p {
  margin-top: var(--space-4);
}
.info .prose {
  margin-top: var(--space-6);
}
/* Metadata jdou vždy v pořadí datového modelu. Prázdné pole se nevypisuje,
   takže řádků je u každého projektu jiný počet — mřížka je proto stavěná
   po dvojicích, ne jako pevná tabulka. */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-4);
  align-content: start;
  font-size: var(--fs-sm);
}
.fact {
  display: grid;
  grid-template-columns: minmax(7em, 10em) 1fr;
  column-gap: var(--space-5);
  align-items: baseline;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
}
.facts dt {
  color: var(--color-fg-muted);
}
.facts dd {
  margin: 0;
}
@media (max-width: 639px) {
  .fact {
    grid-template-columns: minmax(6.5em, 8em) 1fr;
  }
}

/* --- tým ---------------------------------------------------------------- */
/* Rezervovaný pruh na fotografii týmu. Dokud fotografie není, nesmí být
   největším prvkem stránky — je to poctivé místo, ne chybějící hlavní obraz. */
.studio-photo {
  width: 100%;
  aspect-ratio: 32 / 9;
  background: var(--color-surface);
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  margin-block: var(--space-section);
}
@media (max-width: 639px) {
  .studio-photo {
    aspect-ratio: 4 / 3;
  }
}
/* Systémové pravidlo: text ležící PŘÍMO na ploše (--color-surface) se už
   netlumí. Plocha sama je ztišení; tlumená olivová na ní dává jen 4,46 : 1
   a nesplnila by AA. Stejné pravidlo platí pro popisku výkresu v pásmu. */
/* Hotová fotografie týmu nahrazuje rezervovaný pruh — bez podložky. */
.studio-photo--img {
  margin-block: var(--space-section);
  padding: 0;
  aspect-ratio: auto;
  background: none;
  display: block;
}
.studio-photo--img img {
  display: block;
  width: 100%;
  height: auto;
}
.studio-photo .t-annot {
  color: var(--color-fg);
}

.studio-text {
  columns: 1;
  column-gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 960px) {
  .studio-text {
    columns: 2;
  }
}
.studio-text p {
  color: var(--color-fg-muted);
  line-height: var(--leading-relaxed);
  break-inside: avoid;
  margin-bottom: var(--space-4);
}
.team {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
  margin-top: var(--space-section);
}
@media (min-width: 768px) {
  .team {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Než budou portréty, drží místo iniciály. Prázdný šedý obdélník vypadá
   jako chyba; iniciály vypadají jako záměr a nic si nevymýšlejí. */
.member__portrait {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--color-surface);
  margin-bottom: var(--space-5);
}
.member__portrait span {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-fg-muted);
}
.member .t-annot {
  margin: var(--space-1) 0 var(--space-3);
}
.member__bio {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  line-height: 1.65;
}
.member__mail {
  margin-top: var(--space-3);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
}
.member__mail a {
  border-bottom: 1px solid var(--color-rule);
}
.member__mail a:hover {
  border-color: var(--color-brand);
}

/* =========================================================================
   KONTAKT

   Rozvržení podle předané reference: vlevo popisek sekce ve velké sazbě,
   vpravo obsah ve sloupcích. Čtyři řádky pod sebou — adresy, města,
   kariéra, fakturační údaje — oddělené vlasovou linkou.

   Je to rejstřík, ne tabulka: každý řádek má vlastní vnitřní mřížku podle
   toho, co v něm stojí, ale všechny sdílejí jednu svislou osu popisků.
   ========================================================================= */
.contact {
  padding-block: var(--space-section) var(--space-page);
}
.crow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-rule);
}
.crow:first-child {
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 960px) {
  .crow {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
}
.crow__label {
  font-size: var(--fs-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
.contact__lede {
  margin-bottom: var(--space-block);
}

/* Vnitřní mřížka řádku. Dva sloupce jsou výchozí, tři pro města. */
.cgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
}
@media (min-width: 768px) {
  .cgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 56px);
  }
  .cgrid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- položky rejstříku --------------------------------------------------- */
.clist {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.centry + .centry {
  margin-top: var(--space-4);
}
/* Profil bez odkazu: jméno sítě zůstane, ale netváří se jako odkaz. */
.centry__value--pending {
  color: var(--color-fg-muted);
}
.centry__icon {
  width: 20px;
  height: 20px;
  margin-right: 0.5em;
  vertical-align: -4px;
}
.croles__note {
  margin-top: var(--space-3);
}
.centry__label {
  display: block;
}
/* Adresa i odkaz na síť mají jedno chování: vlasová linka, která při
   přejezdu zoranžoví. Oranžová je tu okamžik rozhodnutí, ne ozdoba. */
.centry__value {
  display: inline-block;
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--color-rule);
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.centry__value:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
}

/* --- města --------------------------------------------------------------- */
.place {
  display: grid;
  gap: 2px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}
.place__city {
  font-size: var(--fs-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: 1.2;
}
.place__who {
  font-size: var(--fs-sm);
}
.place__mail {
  justify-self: start;
  margin-top: var(--space-3);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg-muted);
}

/* --- kariéra ------------------------------------------------------------- */
.career__p {
  color: var(--color-fg-muted);
  line-height: var(--leading-relaxed);
  max-width: var(--measure);
}
.career__p + .career__p {
  margin-top: var(--space-4);
}
.career__how {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
  max-width: var(--measure);
  line-height: var(--leading-relaxed);
}
.career__mail {
  margin-top: var(--space-5);
}
.croles {
  margin: var(--space-4) 0 0;
  padding-left: 1.4em;
  font-size: var(--fs-md);
  line-height: 1.9;
}
.croles__none {
  margin-top: var(--space-4);
  max-width: var(--measure);
}

/* --- tiráž ---------------------------------------------------------------
   Rejstřík s rejstříkovou hierarchií: jméno entity, adresa, čísla. Údaje
   jsou položky seznamu s oddělovačem z CSS — řádek zlomí jen MEZI údaji,
   nikdy uvnitř čísla. Bankovní spojení jde plnou barvou: je to jediné
   místo webu, odkud někdo opisuje čísla do platebního příkazu. Mřížka je
   nerovnoměrná, česká entita nese pětkrát víc údajů. */
@media (min-width: 768px) {
  .imprint {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}
.entity {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}
.entity__name {
  font-size: var(--fs-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}
.entity__addr {
  margin-top: var(--space-1);
}
.entity__addr,
.entity__reg {
  max-width: 32em;
}
.ids {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  padding: 0;
  list-style: none;
}
.entity__reg,
.ids {
  margin: var(--space-5) 0 0;
}
/* Oddělovač visí na KONCI údaje, ne na začátku dalšího: když se seznam
   zalomí, zůstane tečka na konci řádku jako znamení, že text pokračuje. */
.ids li:not(:last-child)::after {
  content: '\00b7';
  margin-left: var(--space-2);
}
.ids--bank {
  color: var(--color-fg);
}

/* --- patička ------------------------------------------------------------ */
.site-foot {
  border-top: 1px solid var(--color-rule);
}
.site-foot__in {
  padding: var(--space-6) var(--gutter) var(--space-7);
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.cities {
  display: flex;
  gap: clamp(18px, 3vw, 44px);
  flex-wrap: wrap;
}
.city b {
  font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}
.city p {
  line-height: 1.6;
}
/* Symbol oblohy: kresba značky, ne piktogram. Výška je x-height řádku
   (1ex) a účaří ho usadí přesně do pásma malých písmen. Barvu bere
   z řádku, takže je stejně tichý jako zbytek patičky. Šikmé linky mají
   sklon pruhu E01. Oranžová jedině u bouřky — je to změna, ne ozdoba. */
.wx {
  height: 1ex;
  width: auto;
  margin-right: 0.4em;
  fill: currentColor;
  stroke: none;
}
.wx .s {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.wx .b {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.6;
}
/* Motto a pod ním copyright. Řádkování 1,25 místo 1,5 drží pásek nízký;
   pod 1,25 už to nemá smysl — výšku pásku pak určuje levý sloupec s městy. */
.foot-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  line-height: 1.25;
  text-align: right;
}
/* Motto v patičce se sází po větách, aby se vešlo na úzký displej
   po celých větách a ne uprostřed slova. Tečka drží plný kontrast —
   je to tentýž tvar jako kruh symbolu. */
/* Malými písmeny ztratilo motto siluetu verzálek; od copyrightu pod ním
   ho proto odděluje těžší řez, ne vyšší kontrast — patička má zůstat tichá. */
.foot-motto {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 0.4em;
  /* Stejně jako na úvodní stránce: jen sazba, znění v HTML zůstává. */
  text-transform: lowercase;
  font-weight: var(--weight-medium);
}
/* Odkaz GDPR vedle copyrightu otevírá bublinu (nativní popover, žádný skript).
   Oranžová plocha s bílým písmem — zadání majitele 16. 9. 2026. Pozor:
   bílá na #ff5500 má kontrast 3,2 : 1, proto je text větší a tučnější
   než zbytek patičky. */
.foot-gdpr {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.foot-gdpr:hover {
  color: var(--color-brand);
}
.gdpr {
  position: fixed;
  inset: auto var(--gutter) var(--gutter) auto;
  width: min(460px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100svh - 2 * var(--gutter));
  overflow: auto;
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 0;
  background: var(--brand-orange);
  color: var(--brand-white);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  text-align: left;
}
.gdpr p + p {
  margin-top: var(--space-2);
}
.gdpr__title {
  padding-right: 2em;
  font-weight: var(--weight-semibold);
}
.gdpr a {
  color: inherit;
  text-decoration: underline;
}
.gdpr__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
}
/* Autorizace na Kontaktu: rejstřík jako odkaz, pod ním údaje po řádcích. */
.auth {
  margin-top: var(--space-4);
}
.auth__reg a {
  border-bottom: 1px solid var(--color-rule);
  transition: border-color var(--motion-fast) ease;
}
.auth__reg a:hover {
  border-color: var(--color-brand);
}
.auth__lines {
  margin-top: var(--space-1);
  list-style: none;
  padding: 0;
  color: var(--color-fg-muted);
  line-height: 1.6;
}
.city__link {
  color: inherit;
}
.city__link:hover {
  color: var(--color-brand);
}
/* Autorská práva jsou poslední řádek patičky. Nejtišší barva webu — je to
   údaj, ne tvrzení. */
.foot-copy {
  color: var(--color-fg-quiet);
}
.foot-motto__line {
  white-space: nowrap;
}
@media (max-width: 639px) {
  .site-foot__in {
    flex-direction: column;
  }
  .foot-meta {
    align-items: flex-start;
    text-align: left;
  }
}


/* =========================================================================
   PORADENSTVÍ — PROCES 01 → 06

   Šest kroků, které tvoří jeden příběh od nejasné potřeby k fungujícímu
   výsledku a zpátky. Mřížka je převzatá z .chapter (5fr / 7fr), aby web
   nezískával nový vizuální jazyk kvůli jedné stránce.

   Jediná odchylka: diagram nestojí v postranním sloupci, ale přes obě
   kolonky. Diagramy jsou horizontální obrazy 2 : 1 a v úzkém sloupci by
   se jejich kresba ztratila.
   ========================================================================= */
.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
  /* Diagram sám končí bílou plochou, proto je dolní odsazení menší než
     horní — jinak by mezi kroky vznikla díra. */
  padding-block: var(--space-section) var(--space-block);
  border-top: 1px solid var(--color-rule);
}
@media (min-width: 960px) {
  .step {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  /* Diagram přes celou šířku sazby, ne do sloupce. */
  .step .diagram {
    grid-column: 1 / -1;
    margin-top: var(--space-4);
  }
}
/* Otázka je to, co si klient v dané fázi klade. Nese proto váhu podnadpisu
   a plný kontrast — je to jediný typografický důraz uvnitř kroku. */
.step__question {
  margin-top: var(--space-4);
  font-size: var(--fs-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
  max-width: var(--measure);
}
.step__p {
  color: var(--color-fg-muted);
  line-height: var(--leading-relaxed);
  max-width: var(--measure);
}
.step__p + .step__p {
  margin-top: var(--space-5);
}
.step__aside {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
  max-width: var(--measure);
}
/* Výčet bez odrážek: seznam nese rytmus sám, značka se do něj neplete. */
.step__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-fg-muted);
}

/* Věta mezi kroky. Je to nosník příběhu — bez ní by šest kroků četlo jako
   šest nezávislých služeb. Diagonála značky tu má přesný význam: přechod.
   Není oranžová, protože přechod není rozhodnutí. */
.step__next {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  max-width: var(--measure-wide);
  padding-block: var(--space-5) var(--space-block);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--color-fg);
  text-wrap: pretty;
}
.step__mark {
  flex: 0 0 auto;
  width: calc(12px * var(--e01-bar-ratio));
  height: 12px;
  color: var(--color-fg-muted);
  transform: translateY(0.05em);
}
/* Poslední věta uzavírá smyčku zpátky k prvnímu kroku. */
.step__next--loop {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-section);
}

/* =========================================================================
   DIAGRAM

   Autorská grafika k fázím poradenství. Soubory leží v
   site/assets/diagrams/; postup výměny je v README tamtéž. Dokud soubor
   neexistuje, vykreslí se neutrální plocha s interním označením.

   Obraz se nikdy nekrájí ani neořezává — ani na mobilu. Poměr stran drží
   atributy width/height v HTML, takže stránka při načítání neposkakuje.
   ========================================================================= */
.diagram {
  margin: 0;
}
.diagram__img {
  display: block;
  width: 100%;
  height: auto;
}
/* Tmavá varianta je nepovinná. Když existuje, ukáže se právě jedna —
   a řídí se i ručním přepínačem motivu, ne jen nastavením systému. */
.diagram--themed .diagram__img--dark {
  display: none;
}
:root[data-theme='dark'] .diagram--themed .diagram__img--light {
  display: none;
}
:root[data-theme='dark'] .diagram--themed .diagram__img--dark {
  display: block;
}

/* Diagramy jsou kreslené na světlý podklad. V tmavém režimu by bílá plocha
   uprostřed tmavé stránky pálila; drží ji proto vlastní světlá pasparta
   s vlasovou linkou, aby působila jako výkres položený na stůl, ne jako
   díra ve stránce. Až přijdou tmavé varianty (.dark), tohle pravidlo se
   jich netýká. */
:root[data-theme='dark'] .diagram:not(.diagram--themed):not(.diagram--empty) {
  background: var(--brand-white);
  border: 1px solid var(--color-rule);
}

/* Diagram je odkaz na sám sebe v plné velikosti. Na desktopu je to
   drobnost; na telefonu je to jediná cesta ke čtení kresby, aniž bychom
   obraz ořízli. Nápověda se ukazuje jen tam, kde je potřeba. */
.diagram__zoom {
  display: block;
}
.diagram__zoom:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.diagram__hint {
  display: none;
  margin-top: var(--space-2);
}
@media (max-width: 959px) {
  .diagram__hint {
    display: block;
  }
}
.diagram--empty .diagram__hint {
  display: none;
}

.diagram__placeholder {
  display: flex;
  align-items: flex-end;
  aspect-ratio: var(--ratio-band);
  padding: var(--space-4);
  background: var(--color-surface);
}
.diagram__placeholder .t-label {
  color: var(--color-fg);
  opacity: 0.4;
}

/* --- chybová stránka ----------------------------------------------------
   Jediné místo, kde symbol E01 vystupuje ve velkém formátu: na stránce,
   kde není co jiného ukázat. Nikde jinde na webu se takhle velký neobjeví. */
.notfound {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-section);
  align-items: center;
  /* Chybová stránka je krátká; bez tohohle by patička visela uprostřed. */
  min-height: 52svh;
  align-content: center;
}
@media (min-width: 768px) {
  .notfound {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--axis-gap);
  }
}
.notfound__text .t-display {
  margin-top: var(--space-4);
}
.notfound__text .t-lede {
  margin-top: var(--space-5);
}
.notfound__back {
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
}
.notfound__back a {
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 2px;
  transition: border-color var(--motion-fast) ease;
}
.notfound__back a:hover {
  border-color: var(--color-brand);
}
.notfound__mark {
  color: var(--color-rule);
}
.notfound__mark svg {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================================
   ÚVOD — VIDEO PŘES CELOU OBRAZOVKU A TŘI VĚTY

   Landing je čistý vstup: bez hlavičky, loga a patičky. Video vyplní
   viewport od kraje ke kraji (100 % šířky i výšky), uprostřed stojí symbol
   E01 a přes spodní část tři věty motta v brandové oranžové — vlevo,
   uprostřed, vpravo. Celá plocha je jeden odkaz do projektů.
   ========================================================================= */
.view-home {
  overflow: hidden;
}
.landing {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--brand-charcoal);
  transition: opacity 0.35s ease;
}
.landing.is-leaving {
  opacity: 0;
}
.landing__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.landing__poster,
.landing__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Plakát nevykresluje <img>: který klip se pustí, se losuje až v prohlížeči,
   takže adresu obrázku doplní skript v sekci. Plocha je proto pozadí. */
.landing__poster {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.landing__video {
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* Klipy se střídají přes dva prvky: hraje ten s .is-on, druhý si mezitím
   natahuje další klip. Prolnutí nahradilo probliknutí při přepnutí zdroje. */
.landing__video.is-on {
  opacity: 1;
}
/* Dokud video není, drží místo tmavá plocha s poctivým popiskem —
   tmavá proto, že video bude obraz, ne papír, a oranžové věty na ní
   musí být čitelné stejně jako potom na videu. */
.landing__pending {
  position: absolute;
  inset: 0;
  padding: var(--space-5) var(--gutter);
}
.landing__pending .t-label {
  color: var(--brand-warm-gray);
}

/* Symbol E01 vlevo nahoře — na každém klipu oranžový, barvu motta nepřebírá
   (zadání 16. 9. 2026). */
.landing__mark {
  position: absolute;
  z-index: 1;
  top: var(--gutter);
  left: var(--gutter);
  width: 72px;
  color: var(--brand-orange);
  pointer-events: none;
}
.landing__mark svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 639px) {
  .landing__mark {
    width: 56px;
  }
}

.landing__words {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  column-gap: var(--col-gap);
  margin: 0;
  padding: 0 var(--gutter) var(--space-6);
  font-size: var(--fs-statement);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  /* Verzálka na začátku věty se bije s logotypem, který je celý malými.
     Mění se jen sazba, ne znění: v HTML zůstává „We question“, takže
     motto v patičce, v popiscích i ve zdroji je pořád stejné. */
  text-transform: lowercase;
  line-height: 0.98;
  /* Barvu určuje klip, ne motiv webu — text neleží na stránce, ale na
     obraze. Mapa klip → barva je v scripts/lib/config.mjs (HOME_INK),
     skript ji promítá do atributu data-ink na sekci a mění ji zároveň
     s prolnutím obrazu. Výchozí je černá. */
  color: var(--brand-black);
  transition: color 0.4s ease;
  pointer-events: none;
}
.landing[data-ink='orange'] .landing__words {
  color: var(--color-brand);
}
.landing[data-ink='white'] .landing__words {
  color: var(--brand-white);
}
.landing__words .stop {
  color: inherit;
}
.landing__word {
  white-space: nowrap;
}
.landing__word:nth-child(1) {
  justify-self: start;
}
.landing__word:nth-child(2) {
  justify-self: center;
}
.landing__word:nth-child(3) {
  justify-self: end;
}

/* Odkaz přes celou plochu. Zaostření kreslí obrys dovnitř, ať není
   ořízlé okrajem okna. */
.landing__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.landing__link:focus-visible {
  outline-offset: -6px;
}

/* Telefon: věty pod sebou, každá na své straně. Z trojice v řádku se
   stane sestup zleva doprava — tři polohy zůstávají, mění se jen osa. */
@media (max-width: 639px) {
  .landing__words {
    grid-template-columns: 1fr;
    padding-bottom: var(--space-5);
    font-size: clamp(2.5rem, 13.2vw, 4.2rem);
    line-height: 1.02;
  }
}

/* =========================================================================
   DATABÁZE PROJEKTŮ — MŘÍŽKA / SEZNAM / MAPA

   Mřížka a seznam jsou totéž HTML; rozhoduje atribut data-view na .work.
   Mřížku skládá skript do řádků se společnou výškou (obraz v přirozeném
   poměru, žádné ořezávání) a v rytmu 3–2–4–2–3 obrazů na řádek. Počet
   v řádku určuje měřítko: dvojice je velká, čtveřice drobná. Bez skriptu
   drží tutéž databázi prostá sloupcová mozaika.
   ========================================================================= */
.work {
  --g: clamp(12px, 1.4vw, 20px);
  padding-block: var(--space-5) var(--space-section);
}
.witems {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter);
}

/* --- mřížka ---------------------------------------------------------- */
.work[data-view='grid'] .witems {
  columns: 1;
  column-gap: var(--g);
}
@media (min-width: 640px) {
  .work[data-view='grid'] .witems {
    columns: 2;
  }
}
@media (min-width: 1080px) {
  .work[data-view='grid'] .witems {
    columns: 3;
  }
}
.work[data-view='grid'] .wi {
  break-inside: avoid;
  margin-bottom: var(--space-5);
}
.work[data-view='grid'] .witems.is-laid {
  columns: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--g);
  row-gap: var(--space-6);
}
.work[data-view='grid'] .witems.is-laid .wi {
  flex: 0 0 auto;
  width: var(--w, 100%);
  margin: 0 0 0 var(--ml, 0);
}
.wi[hidden] {
  display: none !important;
}
/* Tvrzení ve volném místě mozaiky: sedí na horní hraně obrazů řádku,
   stejným písmem jako zbytek webu, bez rámečku a bez barvy navíc. */
.wstate {
  display: none;
}
.work[data-view='grid'] .witems.is-laid .wstate {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: var(--w);
  height: var(--sh, auto);
  margin: 0;
  container-type: inline-size;
}
/* Tvrzení má volné místo zaplnit, ne jen obsadit: velikost písma se řídí
   výškou řádku i šířkou bloku (zpětná vazba 12. 9. 2026). */
.wstate__text {
  font-size: clamp(1.25rem, calc(var(--sh, 300px) / 6), 4.5rem);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
  color: var(--color-fg);
}
@supports (width: 1cqw) {
  .wstate__text {
    font-size: max(1.15rem, min(clamp(1.25rem, calc(var(--sh, 300px) / 6), 4.5rem), 13cqw));
  }
}
a.wstate__text:hover {
  color: var(--color-brand);
}
.wi__link {
  display: block;
}
.wi__media {
  display: block;
  background: var(--color-surface);
}
.wi__media img {
  display: block;
  width: 100%;
  height: auto;
}
/* V mozaice má dlaždice poměr, který vypočetlo rozvržení; obraz ho vyplní
   a případný rozdíl se ořízne z obou stran. */
.work[data-view='grid'] .witems.is-laid .wi__media {
  aspect-ratio: var(--ar, 1.414);
}
.work[data-view='grid'] .witems.is-laid .wi__media img {
  height: 100%;
  object-fit: cover;
}
.work[data-view='grid'] .wi__stage,
.work[data-view='grid'] .wi__type,
.work[data-view='grid'] .wi__size {
  display: none;
}
.work[data-view='grid'] .wi__title {
  display: flex;
  align-items: center;
  margin-top: var(--space-4);
  font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}
.work[data-view='grid'] .wi__place {
  display: block;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg-muted);
}
/* Fotografie se při přejezdu nemění; značka se ozve diagonálou v popisce. */
.wi__mark {
  flex: 0 0 auto;
  width: 0;
  height: 0.7em;
  margin-right: 0;
  color: var(--color-brand);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease), width var(--motion-fast) var(--ease),
    margin var(--motion-fast) var(--ease);
}
.wi__link:hover .wi__mark,
.wi__link:focus-visible .wi__mark {
  width: calc(0.7em * var(--e01-bar-ratio));
  margin-right: 0.45em;
  opacity: 1;
}
.wi__link:focus-visible {
  outline-offset: 4px;
}

/* --- seznam ------------------------------------------------------------
   Rejstřík, ne karty. Sloupce seznamu leží ve sloupcích navigace:
   projekt pod logem a Projekty, místo pod Přístupem, stav pod
   Poradenstvím, typologie pod Studiem a Kontaktem. */
.wl-head {
  display: none;
}
.work[data-view='list'] .wl-head,
.work[data-view='list'] .wi__link {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: baseline;
}
.work[data-view='list'] .wl-head {
  padding: 0 var(--gutter) var(--space-3);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.wl-head > :first-child,
.work[data-view='list'] .wi__title {
  grid-column: 1 / 3;
}
/* Plocha je číslo: sloupec stojí pod posledním sloupcem navigace. */
.work[data-view='list'] .wi__size {
  font-variant-numeric: tabular-nums;
}
.wl-sort {
  justify-self: start;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-bottom: 1px solid transparent;
}
.wl-sort:hover {
  color: var(--color-fg);
}
.wl-sort[aria-pressed='true'] {
  color: var(--color-fg);
  border-color: var(--color-brand);
}
/* Směr řazení: drobná šipka jen u zvoleného sloupce, žádné ikony navíc. */
.wl-sort[data-dir]::after {
  content: '\2191';
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.95em;
}
.wl-sort[data-dir='desc']::after {
  content: '\2193';
}
.work[data-view='list'] .wi__media {
  display: none;
}
.work[data-view='list'] .wi__link {
  padding-block: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-rule);
  transition: background-color var(--motion-fast) ease;
}
.work[data-view='list'] .wi:last-child .wi__link {
  border-bottom: 1px solid var(--color-rule);
}
.work[data-view='list'] .wi__title {
  display: flex;
  align-items: baseline;
  font-size: var(--fs-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}
.work[data-view='list'] .wi__place,
.work[data-view='list'] .wi__stage,
.work[data-view='list'] .wi__type,
.work[data-view='list'] .wi__size {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}
.work[data-view='list'] .wi__link:hover .wi__place,
.work[data-view='list'] .wi__link:hover .wi__stage,
.work[data-view='list'] .wi__link:hover .wi__type {
  color: var(--color-fg);
}
@media (max-width: 767px) {
  .work[data-view='list'] .wl-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }
  .work[data-view='list'] .wi__link {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-1);
  }
  .work[data-view='list'] .wi__title {
    grid-column: 1 / -1;
  }
  .work[data-view='list'] .wi__type,
  .work[data-view='list'] .wi__size {
    display: none;
  }
  .work[data-view='list'] .wi__stage {
    justify-self: end;
  }
}

.work[data-view='map'] .witems,
.work[data-view='map'] .wl-head {
  display: none;
}
.work__empty {
  padding: var(--space-page) var(--gutter);
  color: var(--color-fg-muted);
}

/* --- mapa ----------------------------------------------------------------
   Vlastní, ne cizí: žádné dlaždice třetí strany, žádné předávání polohy
   návštěvníka. Body jsou ● — ve značce kruh znamená místo. Plný kruh =
   přesná poloha, prázdný = poloha obce. Oranžová jen pod ukazovátkem. */
.wmap {
  padding: 0 var(--gutter);
}
.wmap[hidden] {
  display: none;
}
.wmap__canvas {
  position: relative;
  width: 100%;
  /* Mapa je hlavní obsah pohledu, ne pruh: bere si celou výšku okna pod
     hlavičkou (zpětná vazba 12. 9. 2026). */
  height: min(calc(100svh - var(--site-head-h, 8rem) - 4.5rem), 92vw);
  min-height: 26rem;
  background: var(--color-surface);
  overflow: hidden;
  /* svislé posouvání stránky zůstává na mapě funkční, vodorovné tažení
     posouvá výřez */
  touch-action: pan-y;
  cursor: grab;
}
@media (max-width: 639px) {
  .wmap__canvas {
    height: min(140vw, 76svh);
  }
}
.wmap__canvas svg {
  display: block;
  width: 100%;
  height: 100%;
}
.map-land {
  fill: var(--color-bg);
  stroke: var(--color-rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.map-studio circle {
  fill: var(--color-fg-muted);
}
.map-studio text {
  fill: var(--color-fg-muted);
  font-size: var(--map-label, 11px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.map-marks {
  transition: opacity 160ms ease;
}
.map-marks.is-fading {
  opacity: 0;
}
.mk-label {
  fill: var(--color-fg);
  letter-spacing: 0.02em;
  pointer-events: none;
}
.mk {
  cursor: pointer;
  outline: none;
}
.mk circle {
  fill: var(--color-fg);
  stroke: var(--color-surface);
  transition: fill var(--motion-fast) ease;
}
.mk--city circle {
  fill: var(--color-surface);
  stroke: var(--color-fg);
}
.mk text {
  fill: var(--color-bg);
  font-weight: var(--weight-semibold);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.mk--city text {
  fill: var(--color-fg);
}
.mk:hover circle,
.mk:focus-visible circle,
.mk.is-active circle {
  fill: var(--color-brand);
  stroke: var(--color-brand);
}
.mk:hover text,
.mk:focus-visible text,
.mk.is-active text {
  fill: var(--color-on-brand);
}
.wmap__card {
  position: absolute;
  z-index: 4;
  min-width: 14rem;
  max-width: min(20rem, calc(100% - 2 * var(--space-4)));
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  box-shadow: 0 18px 44px rgb(0 0 0 / 12%);
  font-size: var(--fs-sm);
}
.wmap__card[hidden] {
  display: none;
}
.wmap__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wmap__card li + li {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}
.wmap__card strong {
  display: block;
  font-weight: var(--weight-semibold);
}
.wmap__card .t-annot {
  display: block;
}
.wmap__card a {
  display: inline-block;
  margin-top: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
}
.wmap__card a:hover {
  border-color: var(--color-brand);
}
.wmap__card .wmap__x {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  color: var(--color-fg-muted);
}
.wmap__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-3);
}
.wmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.lg {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.lg::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-fg);
}
.lg--city::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-fg);
}
.lg--studio::before {
  width: 5px;
  height: 5px;
  background: var(--color-fg-muted);
}
/* Ovládání mapy: nápověda, přiblížení, návrat na celý výřez. */
.wmap__ctrl {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}
.wmap__hint {
  color: var(--color-fg-muted);
}
@media (max-width: 639px) {
  .wmap__hint {
    display: none;
  }
}
.wmap__zoom {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--color-fg);
  border: 1px solid var(--color-rule);
}
.wmap__zoom:hover {
  border-color: var(--color-brand);
}
.wmap__canvas.is-dragging {
  cursor: grabbing;
}
.wmap__reset {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  border-bottom: 1px solid var(--color-rule);
}
.wmap__reset:hover {
  border-color: var(--color-brand);
}

/* =========================================================================
   PŘÍSTUP A STUDIO — SEKCE

   Jedna stavba sekce pro celý web: popisek, tvrzení, text. Kapitoly
   manifestu, transformace, klient, AI, mise, vize i způsob práce používají
   tytéž prvky, aby web nezískával nový jazyk kvůli každé stránce.
   ========================================================================= */
section[id] {
  scroll-margin-top: var(--anchor-offset, var(--space-4));
}
@media (min-width: 768px) {
  :root {
    --anchor-offset: calc(var(--site-head-h, 6rem) + var(--space-5));
  }
}
.psec {
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-rule);
}
.psec--first {
  border-top: 0;
  padding-top: 0;
}
.psec--first .chapters {
  margin-top: 0;
}
.psec__label {
  margin-bottom: var(--space-4);
}
.psec__head {
  margin-bottom: var(--space-block);
}
.psec__title {
  max-width: 17em;
}
.psec__lede {
  margin-top: var(--space-5);
}
.psec__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
}
@media (min-width: 960px) {
  .psec__cols {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  .psec__cols--prose {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.psec__text p {
  color: var(--color-fg-muted);
  line-height: var(--leading-relaxed);
  max-width: var(--measure);
}
.psec__text p + p {
  margin-top: var(--space-4);
}
.psec__more {
  margin-top: var(--space-6);
}

/* Věta z pohledu klienta. Plný kontrast: je to to, co si má čtenář odnést. */
.client-note {
  display: grid;
  gap: var(--space-2);
  max-width: var(--measure);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}
.chapter__body .client-note__text,
.psec__text .client-note__text {
  color: var(--color-fg);
  line-height: var(--leading-normal);
}

/* Odkaz „tudy dál“: diagonála značky, oranžová teprve při přejezdu. */
.more {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 2px;
  transition: border-color var(--motion-fast) ease;
}
.more:hover {
  border-color: var(--color-brand);
}
.more__mark {
  width: calc(10px * var(--e01-bar-ratio));
  height: 10px;
  color: var(--color-fg-muted);
}
.more:hover .more__mark {
  color: var(--color-brand);
}
.more__n {
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-muted);
}

/* Pojmy s výkladem: transformace (co hledáme), mise (co je „lepší“). */
.terms,
.dims {
  margin: 0;
}
.terms__row,
.dims__row {
  display: grid;
  grid-template-columns: minmax(6.5em, 9em) 1fr;
  column-gap: var(--space-5);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-rule);
  font-size: var(--fs-sm);
}
.terms dt,
.dims dt {
  font-weight: var(--weight-semibold);
}
.terms dd,
.dims dd {
  margin: 0;
  color: var(--color-fg-muted);
}

/* Principy práce s klientem a podsekce AI — jedna mřížka. */
.principles,
.aigrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block) var(--col-gap);
}
@media (min-width: 768px) {
  .principles,
  .aigrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .principles,
  .aigrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.principle,
.aiitem {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}
.principle__num {
  margin-bottom: var(--space-3);
  font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-muted);
}
.principle__text {
  margin-top: var(--space-3);
  max-width: var(--measure);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-muted);
}
.aiitem__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
}

/* Místa pro fotografie, které teprve vzniknou. */
.mslot {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  background: var(--color-surface);
  overflow: hidden;
}
@media (min-width: 768px) {
  .mslot:not(.mslot--wide) {
    aspect-ratio: auto;
  }
}
.mslot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mslot--pending.mslot--wide {
  aspect-ratio: 32 / 9;
}
@media (max-width: 767px) {
  .mslot--pending {
    aspect-ratio: 16 / 9;
  }
}
.mslot--pending {
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
}
/* Schémata (sekce AI): celá šířka, bez ořezu. */
.mdiags {
  display: grid;
  gap: var(--space-block);
  margin-bottom: var(--space-block);
}
.mdiag {
  margin: 0;
}
.mdiag img {
  display: block;
  width: 100%;
  height: auto;
  background: none;
}

/* Dvojice před / po na stránce Přístup: dvě samostatné fotografie
   v přirozeném poměru, mezi nimi šipka. Na telefonu pod sebou a šipka
   se otočí dolů. Bílá mezera je sazba, ne součást obrázku. */
.mba {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-block);
}
@media (min-width: 768px) {
  .mba {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--col-gap);
  }
}
.ba {
  margin: 0;
}
.ba img {
  display: block;
  width: 100%;
  height: auto;
}
.ba--pending {
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  aspect-ratio: 10 / 7;
  background: var(--color-surface);
}
.ba--pending .t-annot {
  color: var(--color-fg);
}
.mba__arrow {
  display: block;
  justify-self: center;
  width: 32px;
  color: var(--color-brand);
}
.mba__arrow svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 767px) {
  .mba__arrow {
    transform: rotate(90deg);
  }
}

.mslot--pending .t-annot {
  color: var(--color-fg);
}

/* Mise a vize: jedno velké tvrzení, pod ním výklad ve druhém sloupci. */
.statement__text {
  max-width: 15em;
}
.statement__body {
  margin-top: var(--space-block);
  max-width: var(--measure);
}
.statement__body p {
  color: var(--color-fg-muted);
  line-height: var(--leading-relaxed);
}
.statement__body p + p {
  margin-top: var(--space-4);
}
.statement__body .dims {
  margin-top: var(--space-5);
}
@media (min-width: 960px) {
  .statement__body {
    margin-left: calc((100% + clamp(32px, 5vw, 72px)) * 5 / 12);
  }
}

#tym .team {
  margin-top: 0;
}
.member__portrait--img {
  display: block;
  height: auto;
  object-fit: contain;
  background: none;
}

/* Spolupracovníci: jména, ne karty. Jiná váha než tři partneři —
   neznamená to stejnou organizační roli. */
.collab {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-3) var(--col-gap);
}
.collab__item {
  display: grid;
  gap: 2px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}
.collab__name {
  font-size: var(--fs-md);
  color: var(--color-fg);
}
/* Odkaz na vlastní stránku spolupracovníka: značka se ozve až pod kurzorem. */
a.collab__name {
  border-bottom: 1px solid var(--color-rule);
  transition: border-color var(--motion-fast) ease;
}
a.collab__name:hover {
  border-color: var(--color-brand);
}
/* Jméno spolupracovníka v autorském týmu projektu: tentýž odkaz, tentýž tvar. */
a.team__name {
  color: inherit;
  border-bottom: 1px solid var(--color-rule);
  transition: border-color var(--motion-fast) ease;
}
a.team__name:hover {
  border-color: var(--color-brand);
}
/* Bývalí spolupracovníci: tlumeně. Jsou to jména, ne aktivní vazby. */
.collab--past .collab__name {
  color: var(--color-fg-muted);
}
.collab-groups {
  display: grid;
  gap: var(--space-block);
}
.collab-groups .t-label {
  margin-bottom: var(--space-3);
}

@media print {
  .subnav,
  .wpanel,
  .wmap {
    display: none !important;
  }
}

/* =========================================================================
   VRSTVA PRO AI SYSTÉMY — ikona v patičce, panel a stránka /ai/
   Obsah generuje scripts/lib/ai.mjs z jednoho datového objektu.
   ========================================================================= */
.foot-ai {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.2em;
  color: inherit;
}
.foot-ai:hover {
  color: var(--color-brand);
}
.foot-ai__icon {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Panel: oranžová plocha, bílé písmo, bez stínu a přechodu. Text má
   nejméně 24 px — bílá na #ff5500 má kontrast 3,2 : 1, což WCAG AA
   připouští jen pro velké písmo. */
.aidlg {
  position: fixed;
  inset: 0;
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
  height: calc(100dvh - 40px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--brand-orange);
  color: var(--brand-white);
  overflow: auto;
  overscroll-behavior: contain;
}
.aidlg::backdrop {
  background: transparent;
}
.aidlg__close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  padding: var(--space-4) var(--space-5);
  background: var(--brand-orange);
  color: var(--brand-white);
  font-size: 2.5rem;
  line-height: 1;
}
.aidlg__body {
  padding: var(--space-7) clamp(20px, 5vw, 80px) var(--space-7);
}
.aidlg .ai {
  max-width: 62rem;
  padding: 0;
}
.aidlg,
.aidlg .t-lede,
.aidlg .ai__meta,
.aidlg .ai__dl dt,
.aidlg .ai__dl dd {
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--brand-white);
}
.aidlg .ai__h1 {
  color: var(--brand-white);
}
.aidlg .ai__h2 {
  font-size: 2rem;
  color: var(--brand-white);
  border-color: var(--brand-white);
}
.aidlg .ai__h3 {
  font-size: 1.5rem;
}
.aidlg a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
/* Fokus na oranžové ploše: bílý obrys (výchozí oranžový by nebyl vidět). */
.aidlg :focus-visible,
.gdpr :focus-visible {
  outline-color: var(--brand-white);
}
@media (max-width: 639px) {
  .aidlg {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
  }
  .aidlg__body {
    padding: var(--space-6) var(--space-4);
  }
}
html.ow-aidlg {
  overflow: hidden;
}

/* Stránka /ai/ v běžném vzhledu webu. */
.ai__head {
  margin-bottom: var(--space-section);
}
.ai__head .t-lede {
  margin-top: var(--space-5);
}
.ai__meta {
  margin-top: var(--space-4);
  color: var(--color-fg-muted);
  max-width: var(--measure);
}
.ai__sec {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-rule);
}
.ai__h2 {
  font-size: var(--fs-xl);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}
.ai__h3 {
  font-weight: var(--weight-semibold);
  margin: var(--space-5) 0 var(--space-2);
}
.ai__item + .ai__item {
  margin-top: var(--space-5);
}
.ai__ul {
  list-style: none;
  padding: 0;
  max-width: var(--measure);
}
.ai__ul li + li {
  margin-top: var(--space-2);
}
.ai__dl > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--col-gap);
  padding-block: var(--space-2);
}
@media (min-width: 768px) {
  .ai__dl > div {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  }
}
.ai__dl dt {
  color: var(--color-fg-muted);
}
.ai__dl dd {
  margin: 0;
  max-width: var(--measure);
  overflow-wrap: anywhere;
}
.ai a {
  border-bottom: 1px solid var(--color-rule);
}
.aidlg .ai a {
  border-bottom: 0;
}
.aidlg .ai__dl dt {
  font-weight: var(--weight-semibold);
}
/* Úvodní shrnutí a popisky vrstvy pro AI. */
.ai__eyebrow {
  margin-bottom: var(--space-3);
  color: var(--color-fg-muted);
}
.ai__tagline {
  margin-top: var(--space-2);
  font-weight: var(--weight-semibold);
}
.ai__intro {
  margin-top: var(--space-5);
}
.ai__summary {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-rule);
}
.ai__more {
  margin-top: var(--space-6);
  font-weight: var(--weight-semibold);
}
.ai__note {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
  color: var(--color-fg-muted);
}
.ai__h4 {
  font-weight: var(--weight-semibold);
  margin: var(--space-5) 0 var(--space-2);
}
.aidlg .ai__eyebrow,
.aidlg .ai__note,
.aidlg .ai__tagline {
  font-size: 1.5rem;
  color: var(--brand-white);
}
.aidlg .ai__h4 {
  font-size: 1.5rem;
}